table 行和数据不会在 JSX table 中显示在 React 文档中

Question

我正在尝试构建一个简单的 React 应用程序。我有一个包含 table 的页面，我目前正在尝试使用虚假数据呈现该页面。我可以成功导航到并呈现该页面，但是当我这样做时，只有包含数据的行的 header 和 none 显示出来。这是我现在的代码：

import React from 'react';

const Campus = (props) => {

  const campus = {
      name: 'Terra',
      students: ['katie', 'lara'],
      instructors: ['joe', 'bob']
  }

  return (
    <table className='table'>
      <thead>
        <tr>
          <th>Students</th>
        </tr>
      </thead>
      <tbody>
        { console.log("students ", campus.students) }
         { campus.students && campus.students.map((student, idx) => {
            <tr key={idx} >
              <td>
              {console.log('student is ', student)}
                {student}
              </td>
            </tr>
         })
        }
      </tbody>
    </table>
  );
}

export default Campus;

我可以 console.log 地图中的学生姓名，但是当页面加载时，只显示 header。我很可能遗漏了一些非常明显的东西；我是新手。

Answer 1

改变

<tr key={idx} >

为了

return <tr key={idx} >

table 行和数据不会在 JSX table 中显示在 React 文档中

table rows and data won't show in JSX table in React document

html-table

reactjs

react-jsx