在React中在地图内渲染数组的语法

时间:2017-12-17 10:35:07

标签: reactjs jsx

我在jsx文件中有这个表:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Code</th>
        </tr>
    </thead>
    {
        this.state.levels.map((lvl) =>
            <tbody>
                {
                    <tr>
                        <th scope="col" colSpan="2">{lvl.name}</th>
                    </tr>
                }
                {
                    this.state.subjects.map((subj) => {
                        return (subj.levelId === lvl.id &&
                            <tr key={subj.id}>
                                <td>{subj.name}</td>
                                <td>{subj.code}</td>
                            </tr>
                        )
                    })
                }
            </tbody>
        )
    }
</table>

在块中

this.state.subjects.map((subj)

每个subj都有一个Children属性。我想迭代每个subj的Children并为它渲染一个。我试过这样的事情:

this.state.subjects.map((subj) => {
    return (subj.levelId === lvl.id &&
        <tr key={subj.id}>
            <td>{subj.name}</td>
            <td>{subj.code}</td>
        </tr>

        subj.Children.map((child) => {
            return (true &&
                <tr key={child.id}>
                    <td>{child.name}</td>
                    <td>{child.code}</td>
                </tr>
            )
        })
    )
})

但是没有为每个Parent主题添加额外的行。我尝试了一些,但他们似乎都错了。这个的正确语法是什么?

0 个答案:

没有答案