javascript - Reactjs ES6 类外访问函数

Question

我有一个类“MessageDisplay”，我想从外部调用函数sendMassageToServer。我已经构建了一个辅助函数来从另一个文件调用。但是如何导出类内部的函数呢？

这些数据只是示例。

main.js

export function sendSpeechToServer(query){
  MessageDisplay.sendMessageToServer(query);
}

class MessageDisplay extends React.Component {
    constructor(props) {
      super(props);
      this.state = {message : []};
    }
    (export const??) sendMessageToServer(searchQuery) {
     ...code
    }
}

我们正在从另一个文件访问 sendSpeechToServer() 函数。不幸的是，我什至无法从 sendSpeechToServer() 内部访问 sendMessageToServer()。

任何帮助都值得赞赏。 :)

编辑:答案已找到。对于任何其他人:

export function sendSpeechToServer(query){
  let test = new MessageDisplay();
  test.sendMessageToServer(query);
}

Answer 1

分离组件(MessageDisplay)和sendMessageToServer的更好方法。然后你可以在错误的地方导入sendMessageToServer。您可以像 props 一样注入(inject) sendMessageToServer:

// main.js
import { sendMessageToServer } from './api';

<MessageDisplay sendMessage={sendMessageToServer} />

// MessageDisplay.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MessageDisplay extends Component {
  static propTypes = {
    sendMessage: PropTypes.func.isRequired,
  }

  handleClick = (e) => {
    e.preventDefault();
    this.props.sendMessage();
  };

  render() {
    return (<button onClick={this.handleClick}>Send to</button>)
  }
}

export default MessageDisplay;

它对于测试很有用。