Question

我已经阅读了关于新变化的博客（在哪里描述了这样的警告），所以我有一个问题：编写纯组件的正确方法是什么？没有使用任何操作？

以下是此错误的示例

const Text = ({
    tagName = 'span',
    className = '',
    children = null,
    ...restProps
}) => {
    const Tag = tagName;

    return (
        <Tag {...restProps} className={className}>
            {children}
        </Tag>
    );
};

Text.defaultProps = {
    tagName: 'span',
    className: '',
    children: null,
};

export default Text;

如果我使用connect将Text连接到商店 - 我将遇到此错误，因为我没有在mapDispatchToProps函数中编写任何内容并且根据文档： “如果您没有提供自己的mapDispatchToProps函数或充满动作创建者的对象，则默认的mapDispatchToProps实现只会将调度注入到组件的道具中。”

所以我有一个选择：

to declare dispatch in props in dumb component and omit it in params in Text rendering
to write fake mapDispatchToProps function in connect

哪种变体更令人满意？

Answer 1

您没有从传递到Tag

的道具传播调度

const Text = ({
    tagName = 'span',
    className = '',
    children = null,
    dispatch
    ...restProps
})

Answer 2

我们必须传递一个noop（() => {}），以便不将dispatch传递给连接的组件。

其他选项可能是某种道具映射器，例如recompose's mapProps

警告：<span>标记

2 个答案: