反应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差异文档：

所有DOM属性和属性（包括事件处理程序）都应包含驼峰，以与标准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