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（{ render：function（）{ var {selected} = 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次，而不是1次。要解决这个问题，您可以创建一个memoized选择器，如果提供的参数（在这种情况下为状态）没有更改，它将缓存并返回相同的结果。 Reselect是一个为您创建记忆选择器的库。

跨组件共享处理状态

无法控制父组件

1 个答案: