将状态更新直接推送到有条件渲染的 React 组件？答案

【问题标题】：Push state updates directly to conditionally rendered React component?将状态更新直接推送到有条件渲染的 React 组件？
【发布时间】：2017-08-04 17:43:43
【问题描述】：

我正在构建一个 React 应用程序并有一个选项卡部分，单击选项卡将呈现特定组件。

首先，我的父组件：

class Interface extends Component {
    constructor(props) {
        super(props);
        this.chooseTab = this.chooseTab.bind(this);
        this.state = {
            current: 'inventory',
            inventory: [],
            skills: [],
            friends: [],
            notifications: {}
        };
    }

    chooseTab(tabID) {
      this.setState({ current: tabID });

    chooseComponent(tabID) {
        if (tabID === 'skills') return Skills;
        else if (tabID === 'inventory') return Inventory;
        else if (tabID === 'friends') return FriendsList;
    }

    render() {
        const tabID = this.state.current;
        const CustomComponent = this.chooseComponent(tabID);
        return (
            <div className='column' id='interface'>
              <div className='row' id='tabs'>
                <ActiveTab
                  current={this.state.current}
                  tabID='skills'
                  chooseTab={this.chooseTab}
                />
                <ActiveTab
                  current={this.state.current}
                  tabID='inventory'
                  chooseTab={this.chooseTab}
                />
                <ActiveTab
                  current={this.state.current}
                  tabID='friends'
                  chooseTab={this.chooseTab}
                />
              </div>
              <TabBody>
                <CustomComponent
                  data={this.state[tabID]}
                  notifications={this.state.notifications}
                />
              </TabBody>
            </div>
        );
    }
}

呈现三个 ActiveTab 和一个 TabBody：

const ActiveTab = (props) => {
    const isActive = props.tabID === props.current ? 'active' : 'inactive';
    return (
      <button
        className={`active-tab ${isActive}`}
        onClick={() => props.chooseTab(props.tabID)}
      >{props.tabID}
      </button>
    );
};

const TabBody = (props) => {
    return (
        <div className='tab-body'>
          {props.children}
        </div>
    );
};

这很好用，显然是intended way 处理这个问题。但是，我希望能够将notifications 状态对象移动到我的FriendsList 组件中（因为它是朋友独有的）并且即使FriendsList 不是当前由 TabBody 渲染的组件（即未安装的）。

我目前正在使用全局可用的actions 闭包触发远程状态更改，其中特定操作和setState 在目标元素的ComponentWillMount() 生命周期方法中定义，并且它从激活的任何组件执行远程状态更改。为简洁起见，我已将它们排除在 Interface 之外。

你会如何处理这个问题？我唯一的选择是将notifications 留在Interface 中，在那里定义动作，然后让React 处理向下传递的道具吗？或者有没有办法构建我的选项卡组件和条件渲染，以便我可以触发从单独组件到其中一个选项卡中未显示组件的状态更改，即将notifications 及其相应的操作移动到FriendsList？

【问题讨论】：

您是否考虑过使用redux？
我有，而且它肯定是比我目前的解决方案更优雅的解决方案，但不幸的是，团队的其他成员目前还没有被说服。正在寻找另一种解决方案。
在这种情况下：我唯一的选择是在界面中留下通知，在那里定义操作，然后让 React 处理向下传递的道具吗？是的，这是您唯一的选择。您可以使用 redux/mobx/其他一些状态管理库，或者您需要在组件层次结构中保持状态较高并向下传递 props，以及更新状态的函数。
我想的差不多，但我会继续研究它。感谢您的帮助！

标签： javascript reactjs

【解决方案1】：

几周前我遇到了一个与您类似的问题，如果您不决定采用 Redux、MobX 甚至 Flux 等状态管理器，我认为您应该将 props 传递给他们的孩子。

【讨论】：