Question

如果我在App课程中有状态，并且我想将这些值转移到SecondApp，那你怎么做？我尝试过使用道具，但是当我登录它时，我得到了未定义。

请原谅这个引人注目的问题，我是一个相当新的人，试图弄脏我的手，哈哈。

＆＃13;

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

＆＃13;

Answer 1

首先，您需要在SecondApp中拨打App，然后传递道具。

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。接下来，您可能希望在列表中呈现这些项目，并且需要相应地处理它们。 This文章将指出正确的方向！

Answer 3

如果您的意思是将数据从一个应用程序传递到另一个应用程序（也就是说，您在ID上呈现应用程序而在另一个ID上呈现另一个应用程序），则可以使用事件。每当第一个应用程序的状态更新时，您可以调度一个事件并在另一个应用程序上放置一个事件监听器，以更新它的状态。这是在独立模块/应用程序之间共享数据的常用方法。您可以在google＆＃34; observer subscriber pattern＆＃34;。

时阅读更多相关信息

否则，如果您要将数据传递给子组件，您真的应该阅读react文档。

在组件之间传递状态 - 反应

3 个答案: