如何使用 reactJS 通过循环附加 DOM 元素答案

【问题标题】：How to use the reactJS to append DOM elements with loop如何使用 reactJS 通过循环附加 DOM 元素
【发布时间】：2018-11-03 10:53:06
【问题描述】：

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

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

未捕获的错误：Content.render()：有效的 React 元素（或 null）必须退回。您可能返回了未定义、数组或一些其他无效对象。

        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')
                );

【问题讨论】：

将return dom_content;更改为return {dom_content};
哪个版本的 React ？
您使用的是非常旧的 React 版本。这不是你现在这样做的方式。我建议你使用最新的 react 版本。
好的，我试试最新的 react 版本

标签： javascript reactjs dom

【解决方案1】：

dom_content 是一个数组。

你需要React 16直接渲染它。

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

如果您不想/不能使用 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>
    )
}

【讨论】：

【解决方案2】：

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

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

【讨论】：