Question

我有两个文件First.js和Second.js，它们不是子文件，而父文件则在它们内部有很多功能。我想将First.js内部的1个函数用于另一个文件Second.js。

First.js

export default Header extends React.Component{

  constructor(){
    super();
  }

  updateXS(e){
    alert('Test');
  }
}

Second.js

export default Second extends React.Component{

  constructor(){
    super();

  }
  solveVariable() {
    updateXS()// from first file
  }


  render(){
    return (
      <div className="displayinline col-md-12 ">
         <button onClick={self.solveVariable.bind(this)}>Solve</button>
      </div>
    );
  }
}

在需要调用updateXS（）的“解决”按钮上单击时，第一个文件中还存在其他函数render（）。

Answer 1

您需要将操作添加到容器中

export default Second extends React.Component{

  constructor(){
    super();

  }
  solveVariable() {
    this.props.handleSolveVariable();
  }


  render(){
    return (
      <div className="displayinline col-md-12 ">
         <button onClick={self.solveVariable.bind(this)}>Solve</button>
      </div>
    );
  }
}

然后容器可以处理求解部分，设置状态并将其传递给子级。

class Container extends Component {
  solveThis(e) {
    // ... calculate
    return result;
  }
  handleSolveVariable = (e) => {
    const result = this.solveThis(e);
    this.setState({result})
  }
  render() {
    return (
      <div>
        <First result={this.state.result}/>
        <Second result={this.state.result} handleSolveVariable={this.handleSolveVariable}/>
      </div>
    );
  }
}

您应该牢记“行动多了，数据少了”的反应哲学，而不是像Jquery中那样依赖观察事件。

孩子们可以根据新的状态做出反应。您还可以使用componentWillReceiveProps来比较新道具并对其做出反应。

Answer 2

您可以冒泡或创建一个utils函数文件，然后将其导出。如果您认为您可以在整个应用程序中使用该功能，那么它可能是最好的解决方案。

需要在不导入整个组件的情况下从一个文件调用一个函数到另一个文件

2 个答案: