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

Question

我们有一个对象“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被返回。如果您需要在子组件中访问相同的值，则应该将其作为不同的 prop 传递。

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

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>
    );
}

提前谢谢了！

Answer 1

div使用带键的Fragment代替包装。

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

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