javascript - 基于 URL 的 React 组件状态

Question

我有一个大型网站，在主要网站下有许多子网站。我有一个SubNav显示我们当前访问的公司页面的名称。当用户在页面之间导航时，它应该SubNav使用名称更新 。

这是我尝试过但无济于事的方法。

主要父根组件。

class AppRouter extends React.Component {
  state = { companySelected: "Main Company" };

   // this should update the company and name the SubNav bar 
  updateSelectedCompany = companySelected => {
    console.log("updated selected", companySelected);
    this.setState({ companySelected: companySelected });
  };

  render() {
    return (
      <Router history={history}>
        <div>
          <NavBar />
          <SubNav companySelected={this.state.companySelected} />
          <Switch>
            <Route path="/" component={LandingPage} exact={true} />
            <Route
              path="/company/1"
              component={SubCompany1}
              exact={true}
              updateSelectedCompny={this.companySelected}
            />
            <Route
              path="/company/2"
              component={SubCompany2}
              exact={true}
            />
          </Switch>
          <Footer />
        </div>
      </Router>
    );
  }
}

SubCompany1 页面如下所示：

class SubCompany1 extends React.Component {
  componentDidMount() {
    this.setState({ companySelected: "Sub Company 1" });
    console.log("Did Mount Sub Company1");
  }

  render() {
    return (
      <div>
        <h1>Sub Company 1</h1>
      </div>
    );
  }
}

每次访问页面时都可以通过吗？我对反应很陌生，并不完全确定在组件之间传递状态的最佳方式。

标签： javascriptreactjs

Answer 1

你需要componentDidMount()并且shouldComponentUpdate()

应用路由器

class AppRouter extends React.Component {
  state = { companySelected: "Main Company" };

  updateSelectedCompany = companySelected => {
    this.setState({ companySelected: companySelected });
  };

  //if condition evaluates to true, component will update and re-render. if false, no re-render.
  shouldComponentUpdate(nextProps, nextState){
     return this.state.companySelected !== nextState.companySelected
  }

  render() {
    return (
      <Router history={history}>
        <div>
          <NavBar />
          <SubNav companySelected={this.state.companySelected} />
          <Switch>
            <Route path="/" component={LandingPage} exact={true} />
            <Route
              path="/company/1"
              component={() => <SubCompany1 updateSelectedCompany={this.updateSelectedCompany} />}
          </Switch>
          <Footer />
        </div>
      </Router>
    );
  }
}

子页面

class SubCompany1 extends React.Component {
  componentDidMount() {
      this.props.updateSelectedCompany("Sub Company 1");
  }

  render() {
    return (
      <div>
        <h1>Sub Company 1</h1>
      </div>
    );
  }
}