Question

当渲染div标签列表时，如果div已经存在于DOM中，当第一次运行时，则会添加更少的html属性。

这是我的渲染方法：

render: function() {
    return (
        <div>
             {renderModel(...)}
        </div>
    );
}

以下是renderModel(...)

的实施

function renderModel(...) {
    var connections = [];

    // code to come up with the string to compare for

    if (checkString(stringToCheck)) {
        connections.push(renderModel(...));
    } else {
        connections.push(<div onClick={handleClick} value={stringToCheck}>{label}</div>);
    }
    return connections;
}

因此renderModel(...)将以递归方式呈现。

checkString(...)函数将告诉何时直接打印div，或者递归查找子节点（其中，我在代码中跳过了实现）。

有一个数组有一些字符串，它们是这个函数逻辑的一部分。

有些div标签最初是递归打印的，而有些则不是。然后根据用户操作，更改数组中的字符串。因此，当渲染运行第二次 - 在更改字符串之后 - 然后第一次递归渲染的div需要打印而不进行递归，一切顺利，但div标记被添加而没有value或代码中的任何其他属性。

但有趣的是，onClick句柄工作正常。只会跳过其他属性。

知道如何解决这个问题吗？

Answer 1

正如wintvelt所建议的那样，为数组中的项添加唯一键解决了这个问题。

React没有根据条件正确呈现div标签

1 个答案: