Question

 <script type="text/jsx">

        var data=[];
        data = JSON.parse('{!Accounts}');
        console.log('====data=====',data[0]);
        var accountTableBody = React.createClass({

            render:function(){

                return(
                    <tr>
                        <td>{this.props.Account.Name}</td>
                        <td>{this.props.Account.Type}</td>
                        <td>{this.props.Account.Id}</td>
                    </tr>
                );
            }
        });

        var accountTable = React.createClass({
            render: function() {

                var bodyEle =[];

                this.props.children.forEach(function(acc) {
                    bodyEle.push(<accountTableBody Account={acc} key={acc.Name}  />);
                });

                return(
                    <table>
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Id</th>
                            </tr>
                        </thead>
                        <tbody>
                            {bodyEle}
                        </tbody>
                    </table>
                );
            }
        });
        var element = React.createElement(accountTable, this.props, data);
        React.render(element, document.getElementById('content'));
    </script>

这是我使用的JSX代码，只是显示表头而不是表体

我认为在我的第二个accountTableBody组件的某些地方。

在浏览器控制台中我没有收到任何错误

知道我在做什么错误..

Answer 1

以大写

开头的名称变量

var AccountTable = React.createClass({ ... })
var AccountTableBody = React.createClass({ ... })

var element = React.createElement(AccountTable, this.props, data);

React JS表体组件未呈现

1 个答案: