Question

我有一个问题。示例I有4个组件，A包括B，B包括C，C包括D。我在A中有状态x和函数{ mode: 'dashboard' }。如果没有Context或Redux，我想在D中使用该功能。

1。因此，我应该通过以下函数：

changeMode(mode) => { this.setState({mode: mode})}

，依此类推。

2。或者会喜欢：<B changeMode={this.changeMode} /> and in B will be <C changeMode={this.props.changeMode} /> 在B中，我们将声明一个函数：<B changeMode={this.changeMode} />，依此类推。有什么更好的方法，为什么？预先感谢。

Answer 1

如果您只想将该函数传递给子组件，则可以通过这种方式完成

    import React, { Component } from "react";

class App extends Component {
  state = {
    mode: "dashboard"
  };

  changeMode = () => {
    this.setState({ mode: "mode" });
  };

  render() {
    console.log(this.state.mode);
    return <Second mode={this.changeMode} />;
  }
}

class Second extends Component {
  render() {
    return <Third mode={this.props.mode} />;
  }
}

class Third extends Component {
  render() {
    return <Fourth mode={this.props.mode} />;
  }
}

class Fourth extends Component {
  render() {
    return <button onClick={this.props.mode}>mode</button>;
  }
}

export default App;

如果需要将参数传递给父组件，则可以使用第二个选项

困惑于如何正确地将道具传递给后代组件

1 个答案: