反应colspan不工作

Question

为什么colspan属性在React中没有效果？我创建了一个简单的组件，它呈现以下内容：

<table border="1">
  <tr>
    <th colspan="2">people are...</th>
  </tr>
  <tr>
    <td>monkeys</td>
    <td>donkeys</td>
  </tr>
</table>

我得到的是：

我错过了什么吗？

修改：已解决

这是解决方案。 React期望属性名称为 colSpan ，而不是colspan。在浪费了荒谬的时间来发现这个小小的邪恶事实之后想出了这个。

Answer 1

来自React的DOM Differences文档：

  

所有DOM属性和属性（包括事件处理程序）都应该是camelCased，以与标准JavaScript样式保持一致。

如果您检查浏览器的控制台，您会看到React警告您：

<meta charset="UTF-8">
<script src="https://npmcdn.com/react@15.2.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.2.1/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser-polyfill.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
<div id="app"></div>
<script type="text/babel">

var App = React.createClass({
  render() {
    return <table border="1">
      <tbody>
        <tr>
          <th colspan="2">people are...</th>
        </tr>
        <tr>
          <td>monkeys</td>
          <td>donkeys</td>
        </tr>
      </tbody>
    </table>
  }
})

ReactDOM.render(<App who="World"/>, document.querySelector('#app'))

</script>

Warning: Unknown DOM property colspan. Did you mean colSpan?
    in th (created by App)
    in tr (created by App)
    in tbody (created by App)
    in table (created by App)
    in App

Answer 2

除了更改大小写外，我还必须将字符串中的值更改为数字。而不是：

<td colspan='6' />

我必须这样做：

<td colSpan={6} />

Answer 3

colspan属性位于camelCase中，如colSpan。因此，我们需要使用colspan而不是colSpan。它适用于colSpan='4'和colSpan={4}。

Answer 4

出于某种原因，我不得不在关闭开始标签之前将colSpan放在末尾，因为它不能作为第一个道具开始工作。

Answer 5

我有一个不同的情况，但是对我来说，最终的解决方案是实际上给th / td一个display: table-cell;属性。