ReactJs如何在另一个不是它的子组件的组件中使用组件的值？

Question

我有以下代码来调用以使用现在适用于所有路由的路由。我在Header组件中提供了一些API值。我如何在Route组件中使用这些值？

render() {
  return (
    <div className="loginPage">
      <Header />
      <Routes />
    </div>
  );
}

Answer 1

有几个选择：

• 使用redux之类的数据流框架。但是you might not need redux。

• 将数据存储在父组件的状态中，并通过props传递它（如果需要，还有一个修改它的函数）：

class MyComponent extends React.Component {
  constructor(props){
      super(props);

      this.state = {
          data: {}
      }
  }

  setData = (data) => this.setState({ data })

  render() {
      let { data } = this.state

      return (
          <div className="loginPage">
            <Header data={data} setData={this.setData} />
            <Routes data={data} setData={this.setData} />
          </div>
      );
  }
}

• 通过refs访问标题组件。通常不建议这样做，但它可能会有所帮助，尤其是在使用第三方组件时。

class MyComponent extends React.Component {
    constructor(props){
        super(props);

        this.header_ref = null
    }

    doSomethingWithHeaderRef = () => {
      if (this.header_ref == null)
        return

      let data = this.header_ref.data 

      //do stuff
    }


    render() {
        return (
          <div className="loginPage">
            <Header ref={ref => this.header_ref = ref} />
            <Routes 
              doSomething={doSomethingWithHeaderRef}
              header_ref={this.header_ref}
            />
          </div>
        );
    }
 }