Reactjs - 列表中自定义组件的键答案

【问题标题】：Reactjs - Keys on custom components in listReactjs - 列表中自定义组件的键
【发布时间】：2018-07-19 01:44:42
【问题描述】：

我们有一个带有表单输入的对象“Schema”。我们映射输入并为每个输入返回一个自定义组件，然后完成其余的工作。问题是：

1) 自定义组件不能有 key 属性，因为 key 是 React 使用的特殊属性，不会传递给子组件。

2) 列表中的第一项必须有一个 key 属性，这样 React 才能知道如何更新组件。

如果列表中的第一项是自定义组件，那么这两者是互斥的。我们可以通过用 div 或任何其他通用元素包围 QuestionBlock 并向其添加 key 属性来解决此问题。然而，这会导致代码和 HTML 看起来很草率，有过多的 div 只是为了解决这个问题。有没有其他更清洁的方法来做到这一点。下面是我们之前的代码：

render() {
    return (
        <div className="App">
            {Object.keys(Schema.inputs).map((key,index) => {
                let data = Object.assign({}, Schema.inputs[key]);

                data.index = index;

                return <QuestionBlock key={index} {...data} />;
            }}
        </div>
    );
}

使用上述代码时控制台显示警告：

警告：QuestionBlock：key 不是道具。试图访问它会导致undefined 被返回。如果您需要访问相同的子组件中的值，您应该将其作为不同的传递道具。

下面是有效的代码，但看起来很乱：

render() {
    return (
        <div className="App">
            {Object.keys(Schema.inputs).map((key,index) => {
                let data = Object.assign({}, Schema.inputs[key]);

                data.index = index;

                return <div key={index}>
                            <QuestionBlock {...data} />
                       </div>;
            }}
        </div>
    );
}

非常感谢！

【问题讨论】：

将 key 放在自定义组件上是完全有效的。在您的第一个示例中，我唯一能看到导致问题的是数据是否包含关键字段。这将覆盖正在传递的索引值。
技术上不是错误，而是警告。更新帖子以显示控制台警告。
您是否尝试在代码中的某处访问密钥作为道具？像 this.props.key 这样的东西在 QuestionBlock 组件中的任何地方？
不，我们根本没有尝试将密钥作为道具访问。

标签： javascript reactjs jsx

【解决方案1】：

不要使用div 进行包装，而是使用带键的Fragment。

Fragment 是一个不生成 HTML 的容器，因此不会弄乱您的 HTML 输出。

你也可以使用简写版本<>，而不是<Fragment>

【讨论】：