反应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属性和属性(包括事件处理程序)都应该是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

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

Answer 4

colspan属性采用驼峰式命名法colSpan。所以colspan我们需要使用colSpan.

在 React v16.12 中，您仍然可以将值提供为int，如下所示colSpan={4}或string，如下所示：colSpan="4"。