React无法根据条件正确渲染div标签

Question

When rendering a list of div tags, if the div was already present in the DOM, when running for the first time, then it gets added with less html attributes.

here is my render method:

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

And here is the implementation of 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;
}

So the renderModel(...) will recursively render.

The checkString(...) function will tell when to directly print the div, or to recursively look for child nodes (of which, the implementation I have skipped in the code).

There is an array which has some strings which are part of the logic of this function.

Some div tags gets printed recursively initially, while others don't. Then based on the user action, strings in the array gets changed. So when the rendering runs for a second time - after strings are changed - then the div s which rendered recursively first time needs to be printed without recursion, all goes well, but the div tag gets added without the value or any other properties in the code.

But it is interesting to note that the onClick handle works fine. Only the other properties gets skipped.

Any idea how to solve this?

Answer 1

正如wintvelt所建议的那样 ，向数组中的项目添加唯一键可以解决此问题。