Question

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

我使用点击here
的方式编译后，这些代码仍会出现错误：

未捕获错误：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>));

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

2 个答案: