Question

考虑该应用：


function App() {
  return (
      <div>
        <ComponentOne/>
        <ComponentTwo/>
      </div>
  );
}
export default App;

ComponentTwo为：

class ComponentTwo extends React.Component{
    constructor(){
        super();
        window.handleClick = this.handleClick;
    }
    handleClick = function(){alert('hello');}
    render(){return null;}
}

为什么行得通：

class ComponentOne extends React.Component{
    handleClick(){window.handleClick();}
    render(){return <input type="submit" onClick={this.handleClick}/>;}
}

但不是这样：

// no error, but does not work
class ComponentOne extends React.Component{
    render(){return <input type="submit" onClick={window.handleClick}/>;}
}

或者这个：

// gives an error when the "input button" is clicked saying ComponentTwo.handleClick is not a function
class ComponentOne extends React.Component{
    handleClick(){ComponentTwo.handleClick();}
    render(){return <input type="submit" onClick={this.handleClick}/>;}
}

在第一种情况下，在可行的情况下，使用全局（如果我理解正确的话）window.handleClick似乎不是一个好习惯。有没有更好的办法？或者，处理“单击一个组件更改另一组件的状态”的“最佳实践”方法是什么？

我不确定是否缺少某些内容-尚未进行任何认真的JS编程；到目前为止，仅使用vanilla JS和jquery来处理DOM组件。因此，我也很高兴知道这一点。谢谢。

PS：我从here获得了第一种方法。

Answer 1

处理“单击一个组件更改另一个组件的状态”的“最佳实践”方法是什么？

您可以在父组件中定义函数，并将其作为道具传递给需要处理程序的任何子组件。

或者如果您绝对必须在子组件中定义函数，则可以将其传递给父组件，父组件可以传递该父组件，然后将其作为道具传递给子组件。

但是在我看来，您可以以更好的方式做到这一点。如果希望子组件中的处理程序更改主组件的状态，则最佳做法是使用lift the state。

在ReactJS中调用另一个组件方法：一种方法有效，其他方法无效；为什么？

1 个答案: