反応しない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と期待しています。この小さな邪悪な事実を発見するのに時間を無駄に浪費した後、これを理解する。リアクトDOM Differencesドキュメントから

Answer 1

：

すべてのDOMプロパティと（イベントハンドラを含む）の属性は、標準のJavaScriptスタイルと一致するようにcamelCase形式する必要があります。

ブラウザのコンソールをチェックすると、あなたが反応はこれについて警告を出していることがわかります：ケースを変更することに加え

<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} />