Question

尝试实现以下目标。在渲染我的子组件时，我需要在第4个和第5个子组件之间放置一个分隔符（<hr />）。但是，当我使用下面的代码时，呈现在DOM中的所有内容都是[Object object]null。如果我删除了hr，它会完美呈现。

<div>
    {this.props.items.map(function(c, ind) {
        var hr = ((ind == 3) ? <hr /> : null);
        return <Item id={c.id} /> + hr;
    }.bind(this))}
</div>

Answer 1

+用于字符串连接，但<Item>和<hr>是对象。 +在它们上面调用toString，这就是你得到[Object object]null

的原因

你可以像你说的那样做，然后映射4然后是HR，然后是最后4个。

另一种选择是使用reduce，例如：

<div>
    {this.props.items.reduce(function(previous, c, ind) {
        var next = previous.concat(<[Item id={c.id} />]);
        if (ind == 3) { next.push(<hr); }
        return next;
    }.bind(this), [])}
</div>

Reactjs在Render方法中包含HTML和子组件

1 个答案: