如何使用ReactJS循环添加DOM元素？代码返回数组引发报错求助

嘿，这个问题我太熟悉了！你遇到的Uncaught Error: Content.render(): A valid React element (or null) must be returned...报错，核心原因是早期版本的React（React 16之前）要求组件的render方法必须返回单个有效的React元素（或者null），而你直接返回了一个<li>元素的数组，这在当时的React规则里是不被允许的。

两种可行的解决方案： #

1. 用容器元素包裹列表（兼容所有React版本）

最简单的办法就是给你的数组元素套一个父容器，比如<ul>或者<div>，这样render就返回了单个元素，符合React的要求。另外别忘了给每个列表元素加上key属性——这是React列表渲染的强制要求，帮助React高效更新DOM：

var Content = React.createClass({
  render: function () {
    var dom_content = [];
    for (var i = 0; i < 3; i++) {
      // 给每个li添加唯一的key属性
      dom_content.push(<li className='col-xs-12 col-sm-6 col-md-4 block' key={i}><div className='box'></div></li>);
    }
    // 用ul作为容器包裹所有li元素
    return <ul>{dom_content}</ul>;
  }
});

ReactDOM.render(
  <Content />,
  document.getElementById('the_box')
);

2. 使用React.Fragment（React 16及以上版本适用）

如果你不想在DOM中多一个额外的容器节点（比如不想多出一个<ul>或者<div>），React 16及以上版本支持用React.Fragment来包裹元素，它不会生成额外的DOM节点：

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' key={i}><div className='box'></div></li>);
    }
    // 使用React.Fragment包裹数组
    return <React.Fragment>{dom_content}</React.Fragment>;
    // 也可以用简写形式 <>...</>（需要编译环境支持该JSX语法）
    // return <> {dom_content} </>;
  }
});

额外提醒：关于key属性 #

虽然用循环变量i作为key是快速实现的方式，但如果你的列表元素有自己的唯一标识（比如后端返回的ID），最好用那个唯一标识作为key，这样当列表元素顺序变化或者增删时，React能更准确地识别元素，避免不必要的DOM重新渲染。

内容的提问来源于stack exchange，提问作者Benny Hsieh