如何使用reactJS附加带有循环的DOM元素

Question

如何使用reactJS附加带有循环的DOM元素。

我用的方式点击这里
编译后，这些代码仍然会出现以下错误：

未捕获的错误：Content.render（）：必须返回有效的React元素（或null）。 您可能返回了undefined，数组或其他无效对象。

        var Content = React.createClass({
            render: function () {
                var dom_content = [];
                for (var i = 0; i < 3; i++) {
                    dom_content.push(<li className='col-xs-12 col-sm-6 col-md-4 block'><div className='box'></div></li>);
                }
                return dom_content;
            }
        });
        ReactDOM.render(
                <Content />,
                document.getElementById('the_box')
                );

Answer 1

dom_content是一个数组。

您需要React 16直接渲染它。

现在，您可以从组件的render方法返回一个元素数组。 与其他数组一样，您需要向每个元素添加键，以避免键警告

如果您不想/不能使用React 16，请将它包装在div中。

render: function () {
    var dom_content = [];
    for (var i = 0; i < 3; i++) {
        dom_content.push(
            (
                <li 
                    key={i} // Add this too =)
                    className='col-xs-12 col-sm-6 col-md-4 block'
                >
                    <div className='box'></div>
                </li>
            )
        );
    }
    return (
        <div> // or <ul> ??
            {dom_content}
        </div>
    )
}

Answer 2

您正在将它们推送到名为dom_content的数组对象。 如错误消息所示，您只能返回render方法中的react元素。 在这种情况下，您将返回一个javascript对象。 尝试类似：

new Array(3).map(() => (<li className='col-xs-12 col-sm-6 col-md-4 block'><div className='box'></div></li>));