Javascript 使用react时，ColSpan不适用于TDs

使用React和Bootstrap，我有以下代码：

人员类别：

if (this.state.edit == true){
    return(
    <tr>
        <td className="col-sm-4"><input type="text" value={this.state.firstName} onChange={this.handleChangeFirstName} ></input></td>
        <td className="col-sm-4"><input type="text" value={this.state.lastName} onChange={this.handleChangeLastName} ></input></td>
        <td className="col-sm-4">
          <button className="btn btn-info glyphicon glyphicon-remove" onClick={this.handleCancelEdit}></button>  { "      " }
          <button className="btn btn-info glyphicon glyphicon-ok" onClick={this.handleRealEdit}></button>
        </td>
    </tr>
    );
} else return (
  <tr>
      <td className="col-sm-4">{this.state.firstName}</td>
      <td className="col-sm-4">{this.state.lastName}</td>
      <td className="col-sm-4">
        <button className="btn btn-info glyphicon glyphicon-pencil" onClick={this.handleEdit}></button>  { "      " }
        <button className="btn btn-info glyphicon glyphicon-trash" onClick={this.handleDelete}></button>
      </td>
  </tr>
);

if（this.state.edit==true）{
返回(
{ "      " }
);
}否则返回(
{this.state.firstName}
{this.state.lastName}
{ "      " }
);

“上层”将其称为：

this.props.people.forEach(function(person) {
  rows.push(
    <Person person={person} key={person.id} />
  );
});

return (
  <table className="table table-striped text-center">
      <thead>
          <tr>
              <th className="text-center">First Name</th>
              <th className="text-center">Last Name</th>
              <th className="text-center">Delete</th>
          </tr>
      </thead>
      <tbody>{rows}</tbody>
  </table>
);

this.props.people.forEach（函数（person））{
推(
);
});
返回(
名字
姓
删除
{rows}
);

---

出于某种原因，className=“col-sm-4”或colSpan=“4”或colSpan={4}都不起作用，在这两种情况下，如果state.edit为true，则第一列与其他列相比将非常宽。

是否有

标记？是的，上部组件中有！你介意把它添加到你的代码中吗？当然，只是添加了它们！