Question

我在反应网站上关注如何在render内循环的示例我已经完成了我想完成的任务，但我有

var AdminForumContainer = React.createClass({
    getInitialState: function() {
        return { containers: [] }
    },
    componentDidMount: function() {
        $.ajax({
            method: 'GET',
            url: '/admin/manage/forum/populate',
            success: function(data) {
                console.log(data);
            }
        })  
    },
    render: function() {
        return (
            {this.state.containers.map(function(container) {
                return (
                    <table className="containers">
                    <caption>{container.containername}</caption>
                    <thead className="containerTitle">
                        <tr>
                            <td colspan="2">Main Threads</td>
                        </tr>
                    </thead>
                    <thead>
                        <tr>
                            <td>Thread Name</td>
                            <td>Delete</td>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            container.mainthreads.map(function(mainthread) {
                                return (
                                <tr>
                                    <td>{mainthread.threadname}</td>
                                    <td><button className="button alert">Delete</button></td>
                                </tr>
                                )
                            })
                        }
                        <tr>
                            <td><input type="text"/></td>
                            <td><button className="button" onclick={this.createMainThread(container.containerid)}>Create</button></td>
                        </tr>
                    </tbody>
                    <thead>
                        <tr>
                            <td colspan="2">Sub Threads</td>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            container.mainthreads.map(function(subthread) {
                                return (<tr>
                                    <td>{subthread.threadname}</td>
                                    <td><button className="button alert">Delete</button></td>
                                </tr>)
                            })
                        }
                        <tr>
                            <td><input type="text"/></td>
                            <td><button className="button" onclick={this.createSubThread(container.containerid)}>Create</button></td>
                        </tr>
                    </tbody>
                </table>
                )
            })}
        )
    }
});

但我得到

Uncaught SyntaxError: http://localhost:8080/static/js/admin.jsx: Unexpected token (16:8)
  14 |  render: function() {
  15 |      return (
> 16 |          {this.state.containers.map(function(container) {
     |         ^
  17 |  
  18 |              <table className="containers">
  19 |                  <caption>{container.containername}</caption>

不确定这里有什么问题。感谢。

Answer 1

那条线看起来不错。这是下一行的问题。你的循环函数需要一个return语句。即。

{this.state.containers.map(function(container) {

    return (
        <table className="containers">

传递给Array#map的其他函数也一样。

更新：我已经知道了。去掉周围的牙箍。它们只需要在JSX容器内部。即

UPDATE Mk II：实际上你需要一个容器，因为React组件必须有一个根元素。所以把整个东西放在一个包装div中。即。

render: function () {

    return (
        <div>
            {this.state.containers.map(function(container) {

尝试在渲染中循环时反应意外的标记{}

1 个答案: