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。如果您需要访问相同子组件中的值，则应将其作为其他值传递道具。

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

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

使用键控Fragment代替使用div进行换行。

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

您还可以使用简写版本<>，而不是<Fragment>

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

1 个答案: