javascript - React Table 如何让一个元素跨越整个单元格

Question

您好，我想让我的 td 元素标签占据属于该列的整个单元格。这是我到目前为止得到的输出:

基本上，我希望“独立学习”占据第一栏。到目前为止，这是我的代码:

                   <Table striped bordered hover>
                        <thead>
                            <tr>
                                <th>{`Courses Taught By ${this.state.professorname}`}</th>
                                <th>{`Comments on Course`}</th>
                            </tr>
                        </thead>

                        <tr>
                            {this.state.courses.map((course, i) => (
                            <tr>
                                <td key={course._id}>
                                    <Link to={`/${this.state.id}/${course._id}`}>{course.name}</Link>
                                </td>
                                {this.state.comments[i].map((comment, j) => (
                                    <td key={j}>
                                        <p>{this.state.comments[i][j]}</p>
                                    </td>
                                ))}
                            </tr>
                            ))}
                        </tr>
                    </Table>

我真的很感激能得到一些帮助，因为这个问题困扰了我很长时间。谢谢。

Answer 1

您基本上有一个双列表，但您的逻辑是如果没有评论则不呈现第二列。您需要做的就是将第二个移出 map 。这样，如果表格单元格为空，您就可以保留它。您还嵌套了无效的 tr > tr，我将包装 tr 更改为 tbody。最后，键应该在行的 tr 上，而不是在第一列的 td 上。希望这会有所帮助。

<Table striped bordered hover>
         <thead>
               <tr>
                   <th>{`Courses Taught By ${this.state.professorname}`}</th>
                   <th>{`Comments on Course`}</th>
               </tr>
         </thead>
         <tbody>
               {this.state.courses.map((course, i) => (
                   <tr key={course._id}>
                        <td>
                             <Link to={`/${this.state.id}/${course._id}`}>{course.name</Link>                  
                        </td>
                        <td>
                        {this.state.comments[i].map((comment, j) => (
                             <p key={j}>{this.state.comments[i][j]}</p>
                        ))}
                        </td>
                   </tr>
                ))}
         </tbody>
    </Table>