跨组件共享处理状态

Question

我有三个组成部分。我的 state 有一个名为 state.selected 的属性。

目前在我的 mapStateToProps 中，我在所有三个组件中都这样做：

function mapStateToProps(state, ownProps) {
   return { selected:state.selected }
}

然后在每个表示组件中，我进行相同的处理，称为 getSelectedDisplays。此函数根据所选内容进行一些处理。

var PresentaionalComponent_1 = React.createClass({
   render: function() {
       var displays = getSelectedDisplays();
       // custom processing on `displays` for coponent 1
   }
})

var PresentaionalComponent_2 = React.createClass({
   render: function() {
       var displays = getSelectedDisplays();
       // custom processing on `displays` for coponent 2
   }
})

var PresentaionalComponent_3 = React.createClass({
   render: function() {
       var displays = getSelectedDisplays();
       // custom processing on `displays` for coponent 3
   }
})

无法控制父组件

我希望避免将三个组件包装在额外的 div 中，因为我唯一需要的是将 getSelectedDisplays 的结果传递给它们。我希望避免这种情况：

 React.createElement(OverContainer)

和 OverContainer 将是唯一接收 state.selected 的，然后它会执行 getSelectedDisplays 然后它将渲染三个组件作为道具：

var OverPresentaional = React.createClass({ 渲染：函数（）{ var {选择} = this.props; var display = getSelectedDisplays(selected);

     return React.createElement('div', {},
          React.createElement(PresentaionalComponent_1, { display });
          React.createElement(PresentaionalComponent_2, { display });
          React.createElement(PresentaionalComponent_3, { display });
     );
}

}});

如果不将它们包装在父级中是否可行 div？

Answer 1

您可以创建一个 selector，它将封装从状态获取数据和计算派生属性：

export const getSelectedDisplays = (state) => {
    const selected = state.selected;
    const selectedDisplays = // whatever logic you need to get selectedDisplays from selected
    return {
        selectedDisplays;
    };
};

现在每个组件：

import { getSelectedDisplays } from 'selectorFile';

function mapStateToProps(state, ownProps) {
   return getSelectedDisplays(state);
}

var PresentaionalComponent_1 = React.createClass({
   render: function() {
       var displays = this.props.selectedDisplays;
       // custom processing on `displays` for coponent 1
   }
})

等...

唯一的问题是，获取数据和逻辑将执行 3 次，而不是一次。为了解决这个问题，您可以创建一个记忆选择器，如果提供的参数（在本例中为状态）没有改变，它将缓存和 return 相同的结果。 Reselect 是一个为您创建备忘选择器的库。

跨组件共享处理状态

Share processed state across components

redux

react-redux

无法控制父组件