反应colspan不工作 [英] React colspan not working

问题描述

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

 < table border =1> 
< tr> 
< th colspan =2>人是......< / th> 
< / tr> 
< tr> 
< td>猴子< / td> 
< td>驴< / td> 
< / tr> 
< / table> 
  

我得到的是：

文档： b
$ b

所有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：// np mcdn.com/babel-core@5.8.38/browser-polyfill.min.js\"></script><script src =https://npmcdn.com/babel-core@5.8.38/browser < / script>< / script>< div id =app>< / div>< script type =text / babel> var App = React.createClass {return< table border =1> < TBODY> < TR> < th colspan =2>人是......< / th> < / TR> < TR> < TD>猴< / TD> < TD>驴< / TD> < / TR> < / tbody的> < /表> }}）ReactDOM.render（< App who =World/>，document.querySelector（'＃app'））< / script>  

 警告：未知的DOM属性colspan。你是不是指colSpan？ 
（由App创建）
在tr（由App创建）
在tbody（由App创建）
在表中（由App创建）
在App中
  

Why colspan attribute doesn't have effect in React? I created simple component which renders the following:

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

and what I get is:

Am I missing something?

Edit: SOLVED

Here is the solution. React expects the attribute name as colSpan, not colspan. Figured this out after wasting ridiculous amount of time to discover this little evil fact.

解决方案

From React's DOM Differences documentation:

All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style.

If you check your browser's console, you'll see that React warns you about this:

<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

这篇关于反应colspan不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！