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导入。您可以像道具一样注入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()是一种反模式，这表明类被滥用。

反应组件类主要用于使生命周期挂钩可用并维护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);
}

类之外的Reactjs ES6 Access函数

3 个答案: