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
    }
}

我们从另一个文件访问sendSpeechTo Server（）函数。不幸的是，我甚至无法从sendSpeechToServer（）内部访问sendMessageToServer（）。

任何帮助肯定是值得赞赏的。 :)

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

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

Answer 1

分离组件（MessageDisplay）和sendMessageToServer的更好方法。然后你可以导入sendMessageToServer awry在哪里。你可以像道具一样注入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;

它对测试很有用。

Answer 2

为let test = new MessageDisplay()这样的一般用途手动实例化一个组件是一个反模式，这表明一个类被滥用。

React组件类主要用于使生命周期钩子可用并维护state。他们可以从遗传（除了与React.Component的关系）和其他OOP特征中稀疏地受益。

可以使用组件方法作为new MessageDisplay().sendMessageToServer(query)的事实意味着首先使它成为组件方法是错误的。类不应该是美化名称空间; ES模块在现代JavaScript中扮演命名空间的角色。

一种正确的方法是提取方法并在两个地方使用它作为常规辅助函数。功能方法在React中被认为是惯用的。

Answer 3

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

这很糟糕，因为你不应该用new关键字创建新的react.component实例，更好地使用这样的静态函数

static sendMessageToServer(searchQuery) {
     ...code
    }

然后

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