Reactjs 如何在react jsx中设置复选框的名称

我试图在复选框输入中设置名称，但似乎不起作用：

const DepartmentRow = ({ data }) =>
<tbody>
  <tr>
    <td><input type="checkbox" name="ListOfDepartments" value={data.department}/>
      <span>{data.departament}</span>
    </td>
  </tr>
</tbody>;

DepartmentRow.propTypes = {
    data: PropTypes.object
};

const DepartmentRow=（{data}）=>
{data.department}
;
DepartmentRow.propTypes={
数据：PropTypes.object
};

在数据中，我接收到一个具有部门的用户对象。如果我写：

<td>{data.department}</td>

{data.department}

它工作正常，并显示部门名称，因此我收到了正确的数据信息

这是我目前得到的：

我想要这个：

---

谢谢大家!

看起来您的输入div占用了整个空间。尝试使用带有

display:inline block

的单个div，并将

input

和

span

放在其中。

看起来您的input div占用了整个空间。尝试使用带有

显示：内联块的单个div，并将
输入
和
span
放在其中。
您的代码可能有输入错误，您是否尝试调用
数据.部门
而不是
数据.部门

以下是我的作品

const DepartmentRow = () => {
    const data = {
        department: 'Production',
    }
    return(
        <tbody>
            <tr>
                <td><input type="checkbox" name="ListOfDepartments" value={data.department}/>
                <span>{data.department}</span>
                </td>
            </tr>
        </tbody>
    )
}

const DepartmentRow=（）=>{
常数数据={
部门:"生产",，
}
返回(
{data.department}
)
}
您的代码可能有输入错误，您是否尝试调用
数据.部门
而不是
数据.部门

以下是我的作品

const DepartmentRow = () => {
    const data = {
        department: 'Production',
    }
    return(
        <tbody>
            <tr>
                <td><input type="checkbox" name="ListOfDepartments" value={data.department}/>
                <span>{data.department}</span>
                </td>
            </tr>
        </tbody>
    )
}

const DepartmentRow=（）=>{
常数数据={
部门:"生产",，
}
返回(
{data.department}
)
}
@Scusf0尝试使用chrome开发工具检查元素并摆弄css。@Scusf0尝试使用chrome开发工具检查元素并摆弄css。