时间戳

首页 > 解决方案 > 如何使用 reactJS 通过循环附加 DOM 元素

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

问题描述

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

我使用的方式点击这里
编译后这些代码仍然得到错误：

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

标签： javascriptreactjsdom

解决方案

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>
    )
}

推荐阅读