React colspan無法正常工作

爲什麼colspan屬性在React中不起作用？我創建簡單的組件，它呈現如下：React colspan無法正常工作

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

什麼，我得到的是：

我缺少的東西？

編輯：解決

這裏是解決方案。 React預計屬性名稱爲colSpan，而不是colspan。在浪費了大量時間來發現這個小小的邪惡事實之後，我們發現了這一點。

來源

2016-07-11 Tuomas Toivonen

有在你的代碼中，我看不到任何問題。你能告訴更多細節嗎？這是小提琴。你可以看到colspan運行良好。 https://jsfiddle.net/m2jknr70/ –

閱讀已編輯的帖子。 React不喜歡舊式的HTML語法 –

請創建答案，而不是將其添加到問題文本中。這是完全合法的回答你自己的問題。 – luboskrnac

從陣營的DOM Differences文檔：

所有DOM屬性和屬性（包括事件處理程序）應以駝峯與標準的JavaScript風格一致。

如果您檢查您的瀏覽器的控制檯，你會看到陣營提醒你一下：

<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

來源

2016-07-11 09:38:02

除了改變的情況下，我也有將值從一個字符串更改爲一個數字。取而代之的是：

<td colspan='6' />

我不得不這樣做：

<td colSpan={6} />

來源

2017-08-22 21:56:52

尷尬，這是解決方案，但它絕對有效。謝謝Nathan！ – Sage

React colspan無法正常工作

回答

相關問題