Javascript “保持一个单一的”；主动的；多个组件之间的状态

我正试图遵循最佳实践，同时遵守文档。从可维护性的角度来看，无需创建许多一次性方法来处理问题

总之，我试图在兄弟元素之间实现一种至少在视觉上处于“活动”状态的状态。使用jQuery之类的工具，我只需做

$(document).on('.nav-component', 'click', function(e) {
    $('.nav-component').removeClass('active');
    $(this).addClass('active');
});

然而，在react中，每个组件本身独立于下一个和上一个组件，并且应根据文件保持不变

也就是说，当我处理组件的单击事件时，我可以成功地将其设置为活动和非活动状态，分别将其打开和关闭。但我最终会遇到这样一个地方：当我不需要它们时，我有多个“活动”元素

---

这用于设置各种导航。因此，我希望目前正在使用的一个具有活动类，而其余的将不会

我使用一个带有回流的app.store来设置多个页面/组件的状态。您可以对公共组件执行相同的传递状态，但使用通量模式更干净

类AppCtrlRender扩展组件{
render（）{
让page=this.state.appState.currentPage；
让hideAbout=（页面！=“关于”）；
让hideHome=（page！=“home”）；
返回(
);
}
}
让getState=function（）{返回{appState:AppStore.getAppState（），}；}；
导出默认类AppCtrl扩展AppCtrlRender{
构造函数（）{
超级（）；
this.state=getState（）；
}
componentDidMount=（）=>{this.unsubscribe=AppStore.listen（this.storeDidChange）；}
componentWillUnmount=（）=>{this.unsubscribe（）；}
storeDidChange=（）=>{this.setState（getState（））；}
}

我使用带有回流的app.store来设置多个页面/组件的状态。您可以对公共组件执行相同的传递状态，但使用通量模式更干净

类AppCtrlRender扩展组件{
render（）{
让page=this.state.appState.currentPage；
让hideAbout=（页面！=“关于”）；
让hideHome=（page！=“home”）；
返回(
);
}
}
让getState=function（）{返回{appState:AppStore.getAppState（），}；}；
导出默认类AppCtrl扩展AppCtrlRender{
构造函数（）{
超级（）；
this.state=getState（）；
}
componentDidMount=（）=>{this.unsubscribe=AppStore.listen（this.storeDidChange）；}
componentWillUnmount=（）=>{this.unsubscribe（）；}
storeDidChange=（）=>{this.setState（getState（））；}
}

需要在React中共享某种状态的同级通常是一个线索，表明您需要将状态进一步向上拉到组件层次结构中，并让一个公共父级管理它（或将其拉到状态管理解决方案中，如Redux）

对于一次只能有一个处于活动状态的同级组件，您需要的关键状态是能够识别当前处于活动状态的组件，以及：

• 将该状态作为道具传递给每个组件（以便组件本身可以检查其当前是否处于活动状态-例如，如果每个项目都有相关id，则将当前活动项目的id存储在父组件中，并将其作为

  activeId

  prop传递给每个组件）

e、 g:

---

React的诀窍是根据从头开始需要呈现的状态（就像在服务器上呈现一样）来考虑UI，而不是考虑使UI反映状态更改所需的单个DOM更改（如jQuery示例所示），as React处理根据两个不同状态的完整渲染为您进行这些单独的DOM更改。

兄弟需要在React中共享某种状态，这通常是您需要将状态进一步向上拉到组件层次结构并由一个公共父级管理它的线索（或者将其拉入状态管理解决方案，如Redux）

对于一次只能有一个处于活动状态的同级组件，您需要的关键状态是能够识别当前处于活动状态的组件，以及：

• 将该状态作为道具传递给每个组件（以便组件本身可以检查其当前是否处于活动状态-例如，如果每个项目都有相关id，则将当前活动项目的id存储在父组件中，并将其作为

  activeId

  prop传递给每个组件）

e、 g:

---

React的诀窍是根据从头开始需要呈现的状态来考虑UI（就像在服务器上呈现一样），而不是考虑使UI反映状态更改所需的单个DOM更改（如jQuery示例中所示），as React处理根据两个不同状态的完整渲染为您进行这些单独的DOM更改。

如何在JS中使用

class

？它是否只属于ES6？Babel是ES6最流行的解析器。如何在JS中使用

class

？它是否只属于ES6？Babel是ES6最流行的解析器。

var Nav1 = React.createClass({
  getInitialState() {
    return {activeId: null}
  },
  handleChange(activeId) {
    this.setState({activeId})
  },
  render() {
    return <div className="Nav">
      {this.props.items.map(item =>
        <NavItem
          activeId={this.state.activeId}
          item={item}
          onClick={this.handleChange}
        />
      )}
    </div>
  }
})

var Nav2 = React.createClass({
  // ... rest as per Nav1...
  render() {
    return <div className="Nav">
      {this.props.items.map(item =>
        <NavItem
          active={this.state.activeId === item.id}
          item={item}
          onClick={this.handleChange}
        />
      )}
    </div>
  }
})