Question

我正在尝试使用React构建一个简单的表并运行一个小问题。

这是HTML：

<div>  
  <table>
    <tbody id="content">
      <tr>
        <th>Name</th>
        <th>Email</th> 
      </tr>
    </tbody>
  </table>
</div>

然后是我的React模块：

var FriendsContainer = React.createClass({
    getInitialState: function(){
        return {
            data: [
                {'name':'Lorem Ipsum', 'email':'email1@gmail.com'}, 
                {'name':'Caveat Broader', 'email':'email2@gmail.com'},
                {'name':'Runther Brigsby', 'email':'email3@gmail.com'}
            ]
        }
    },

    render: function(){
        var listItems = this.state.data.map(function(person) {
            return(
                <tr>
                    <td>{person['name']}</td>
                    <td>{person['email']}</td>
                </tr>
            )
        });
        return (
            {listItems}
        )
    }
});

我一直收到错误Error: FriendsContainer.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

我做错了什么？

Answer 1

您的map调用会生成一个数组，您必须将其包装在父元素（本例中为tbody）中，因为React组件必须具有单个根元素。您还必须在其中包含表格标题，还可以选择table标记：

    return (
        <table>
            <tbody id="content">
                <tr>
                    <th>Name</th>
                    <th>Email</th> 
                </tr>
                {listItems}
            </tbody>
        </table>
    );

接下来，更改您的map回调，以便它也接受＆＃39; i＆＃39; （索引），以便您可以为tr分配唯一键：

var listItems = this.state.data.map(function(person, i) {
        return(
            <tr key={i}>
                <td>{person['name']}</td>
                <td>{person['email']}</td>
            </tr>
        )
    });

这应该这样做。

Answer 2

你应该至少包装在像

这样的div中

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

和@Dave Newton说应该有一个更高级别的标签，如table而不是div。根据错误，render方法应该返回null或空<div>而不是其他任何东西。

Answer 3

如果您查看错误消息，...You may have returned undefined, an array or some other invalid object....，那么，渲染的返回类型为JSX.Element，

---
render(): JSX.Element {
retrun <JSX.Element>{Something}
}

东西：对于你的问题，它应该是table。

Answer 4

终于明白了：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>React Tutorial</title>
        <script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script>
        <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
        <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    </head>
    <body>
        <div id="content">
        </div>
    <script type="text/babel" src="script.js"></script>
    </body>
</html>

反应组件：

var BuildTable = React.createClass({
    getInitialState: function(){
        return {
            columns: ['name', 'email', 'test'],
            rows: [
                {'name':'brandev balbusor', 'email':'email1@gmail.com'},
                {'name': 'lorem ipsum', 'email':'email2@gmail.com'},
                {'name':'titus maldav', 'email':'email3#gmail.com'}
            ]
        }
    },

    render: function(){
        return (
            <table>
                <CreateColumns col={this.state.columns} />
                <CreateRows people={this.state.rows} />
            </table>
        )   
    }
});

var CreateColumns = React.createClass({
    render: function(){
        var columns = this.props.col.map(function(column){
            return <th> {column} </th>
        });

        return (
            <thead>
                <tr>
                    {columns}
                </tr>
            </thead>
        )
    }
});

var CreateRows = React.createClass({
    render: function(){
        var data = this.props.people.map(function(person){
            return (
                <tr>
                    <td>{person['name']}</td>
                    <td>{person['email']}</td>
                </tr>
            )
        });
        return (
            <tbody>
                {data}
            </tbody>
        )
    }
});

建立反应表

4 个答案: