反应colspan不起作用

小编典典

反应colspan不起作用

reactjs

为什么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。在浪费了荒谬的时间去发现这个小小的邪恶事实之后，想出了这一点。

阅读 280

2020-07-22

共1个答案

小编典典

来自React的DOM差异文档：

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

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

<meta charset="UTF-8">

<script src="https://npmcdn.com/[email protected]/dist/react.js"></script>

<script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>

<script src="https://npmcdn.com/[email protected]/browser-polyfill.min.js"></script>

<script src="https://npmcdn.com/[email protected]/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

2020-07-22