React / Redux：将mapStateToProps属性封装到无状态组件的变量中

Question

我有一个React组件，它多次调用Redux选择器函数。 我希望通过将函数调用存储在变量中并在组件中使用它来进行重构。 这是为了避免在渲染组件时必须多次调用同一函数，而不必通过将其存储到变量中而只调用一次。

在我的代码中，我使用dataLayerName存储选择器函数： getDataLayerName 。 我注意到dataLayerName的值正在记录函数调用，而不是存储中的实际值。

// Code edited for brevity
const COOKIE = 'cookie';

const dataLayerName = ({ getDataLayerName }) => getDataLayerName;

const HowItWorksItem = ({
    getTranslations,
    getDataLayerName,
}) =>
        <div>
            <div>
                {getTranslations({
                    title: 'Title 1',
                    cookie: COOKIE,
                    dataLayerName,
                })}
            </div>
            <div>
                {getTranslations({
                    title: 'Title 2',
                    cookie: COOKIE,
                    dataLayerName,
                })}
            </div>
        </div>
    </Cell>;

const mapStateToProps = state => ({
    getDataLayerName: selectDataLayerName(state, COOKIE),
});

export default connect(mapStateToProps)(HowItWorksItem);

Answer 1

对于您正在做的工作，我建议使用两个文件-一个用于选择组件所需的数据，另一个用于根据数据呈现DOM元素。 我认为这将大大澄清您的代码。

此外，您发布的代码也存在一些问题。 首先，您的选择器应该是状态的函数。 假设getDataLayerName是在其他地方定义的有效选择器，您应该可以在容器（获取数据的文件）中使用它，如下所示：

HowItWorksItemContainer.js

import HowItWorksItem from './HowItWorksItem.js'
import { getDataLayerName } from './selectors.js'

function mapStateToProps(state) {
  const dataLayerName = getDataLayerName(state);
  return { dataLayerName };
}

export default connect(mapStateToProps)(HowItWorksItem);

作为附带说明，我个人认为Redux选择器应具有标准后缀，例如，我将其称为dataLayerNameSelector而不是getDataLayerName 。 但这完全取决于您。

接下来，您想将HowItWorksItem(s)呈现到DOM。 我假设您只想渲染一个带有两个标题的HowItWorksItem （如您发布的代码中所示）。 如果需要两个HowItWorksItems ，则可以在父组件中创建两个HowItWorksItemContainers ，如下所示： <HowItWorksItemContainer title='Title 1' /> 。

DOM也有一个问题： </Cell>标记是关闭的，而没有开始标记。 现在，我只是省略了它，但您也可以只添加一个开头<Cell> 。

import React from 'react';
import getTranslations from './utilities';

const COOKIE = 'cookie';

function HowItWorksItem(props) {
  return (
    <div>
        <div>
            {getTranslations({
                title: 'Title 1',
                cookie: COOKIE,
                props.dataLayerName,
            })}
        </div>
        <div>
            {getTranslations({
                title: 'Title 2',
                cookie: COOKIE,
                props.dataLayerName,
            })}
        </div>
    </div>
  );
}

希望这个答案可以使您更清楚地了解如何使用Redux选择器将数据传递到组件。