在组件之间传递状态-React

Question

如果我在App类中有一个状态，并且想将这些值传输到SecondApp ，那么您该如何处理？ 我已经尝试过使用道具，但是当我对其进行控制台登录时，却无法定义。

打扰一下nooby的问题，我还很陌生，试图弄脏我的手，哈哈。

 class App extends Component { constructor(props) { super(props) this.state = { todo: ['hello', 'hey'] } } } class SecondApp extends Component { render() { return ( <p>?</p> ) } } 

Answer 1

首先，您需要在App调用SecondApp ，然后传递道具。

 class SecondApp extends React.Component { render() { return ( < p > {this.props.todo} < /p> ) } } class App extends React.Component { constructor(props) { super(props) this.state = { todo: ['hello', 'hey'] } } render() { return ( < SecondApp todo = { this.state.todo } /> ); } } ReactDOM.render(<App />, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> 

Answer 2

如果您正确传递了道具，则不应出现未定义的道具。 道具将是解决此问题的正确方法！

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      todo: ['hello', 'hey']
    }
  }

  render() {
    return <SecondApp testProp={this.state.todo}/>;
  }
}
class SecondApp extends Component {
  render() {
    return <div>this is the prop: {this.props.testProp}</div>;
  }
}

如果这样通过，您将看到道具显示为“ hellohey”，请查看JSFiddle 。 接下来，您可能需要将这些项目呈现在列表中，并将需要相应地进行处理。 该文章将指向您在正确的方向！

Answer 3

如果您打算将数据从一个应用程序传递到另一个应用程序（也就是说，您在一个ID上呈现一个应用程序，而在另一个ID上呈现另一个应用程序），则可以使用事件。 每当第一个应用程序的状态更新时，您都可以调度事件并将事件侦听器放置在另一个应用程序上，从而更新其状态。 这是在独立模块/应用程序之间共享数据的常用方法。 当您使用Google的“观察者订阅者模式”时，可以阅读有关此内容的更多信息。

否则，如果您打算将数据传递给子组件，那么您确实应该阅读react文档。