使用反应时，ColSpan不适用于TD

Question

使用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>
);

上层＆＃39;将其称为以下内容：

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>
);

由于某种原因， className =＆＃34; col-sm-4＆＃34; ， colSpan =＆＃34; 4＆＃34; 或 colSpan = {4} 有效，在两种情况下，如果 state.edit为真，第一列与其他列相比将非常宽。