Question

我正在我的顶级路由上执行身份验证，我在使用react-router命名了App。我的应用正在使用以下

  <div className="app-wrapper">
    <NavbarC currentUser={this.state.currentUser} />
    {this.props.children}
  </div>

我希望能够将this.state.currentUser传递给this.prop.children。

这是可能的，还是应该使用我创建的UserStore创建新状态？

Answer 1

由于我使用flux，似乎处理它的正确方法是从每个路由的商店中提取数据。我的路线如下：

let getCurrentUserFromStore = () => {
  return { currentUser: UserStore.getCurrentUser() };
}

export default class Landing extends React.Component{
  constructor(props) {
    super(props);
    this.state = getCurrentUserFromStore();
    this.onStoreChange = this.onStoreChange.bind(this);
  }
  onStoreChange() {
    this.setState(getCurrentUserFromStore());
  }
  componentDidMount() {
    UserStore.addChangeListener(this.onStoreChange);
  }
  componentWillUnmount() {
    UserStore.removeChangeListener(this.onStoreChange);
  }
  render() {
    if ($.isEmptyObject(this.state.currentUser)) {
      return <LoginPage />
    } else {
      return <DashboardPage currentUser={this.state.currentUser} />
    }
  }
}

将this.state传递给react-1.x / React，Flux中的子节点

1 个答案: