如何在reactjs中的另一个文件中使用一个组件的状态？

Question

我有两个js文件，一个是app.js，另一个是foo.js。我想在foo.js中访问app.js的状态。

App.js

class App extends React.Component {
  constructor(props) {
    super(props);
      this.state = {test:" None "};
  }

  function onChange(event) {
    this.setState({
      test: event.target.value,
    });
  }

 render() {
   return(
     <select onChange={this.onChange}>
       <option value="India">India<option>
       <option value="Australia">Australia<option>
     </select>
   );
 }
}
export default App;

现在我想在foo.js文件中访问以上状态（测试）。

Foo.js

class Foo extends React.Component {
  render() {
    /* Some magic happens */
    return(<h1>{this.props.test}</h1>);
  }
}

是Reactjs的新手。我该怎么做？预先感谢您的帮助。

Answer 1

有两种方法：

1. 这两个组件之一将成为另一个组件的父组件。状态将在父级中定义，并作为道具传递给子级。
2. 这两个组件将是第三个组件的子组件。该状态将在父级中定义，并作为道具传递给两个子级。

如果需要修改子组件之一的状态，则需要将回调函数从父组件传递给子组件，以便子组件调用该回调函数以执行更改。