Featured.render()：必须返回有效的React元素(或null)。呈现项目列表

Question

我试图打印一个列表，但我得到了这个错误，我不知道是什么问题。这意味着我将返回null，但在我看来，我返回的是listItems，您可以看到从另一个组件传递的列表。

全错误：

Featured.render()：必须返回有效的React元素(或null)。您可能已返回未定义的数组或其他无效对象。

我的片段：

import React, {Component} from 'react';
class Featured extends Component {
    render() {

        // const items = function (items) {
            const listItems = this.props.items.map((items) =>
                <div className="fh5co-block to-animate">
                    <div className="overlay-darker"></div>
                    <div className="overlay"></div>
                    <div className="fh5co-text">
                        <i className="fh5co-intro-icon icon-bulb"></i>
                        <h2>{items.toString()}</h2>
                        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there
                            live the blind texts.</p>
                        <p><a href="#" className="btn btn-primary">Get In Touch</a></p>
                    </div>
                </div>
            );
        // }
        return (
            listItems
        );
    }
}
export default Featured;

Answer 1

不能从React中的呈现函数返回组件数组--必须返回单个组件。只需将listItems封装在包装器div中，就可以很容易地完成这一任务：

return (
  <div>
    { listItems }
  </div>
);