web-dev-qa-db-ja.com

React colspanが機能していません

Reactでcolspan属性が効果を持たないのはなぜですか？次をレンダリングする単純なコンポーネントを作成しました。

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

私が得るものは：

enter image description here

何か不足していますか？

編集：解決済み

これが解決策です。 Reactは、属性名がcolspanではなくcolSpanであることを期待します。

javascripthtmluser-interfacedomreactjs
33
Tuomas Toivonen

Reactの DOM Differences ドキュメンテーションから：

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

ブラウザのコンソールを確認すると、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
35
Jonny Buchanan

大文字と小文字の変更に加えて、値を文字列から数値に変更する必要もありました。これの代わりに：

<td colspan='6' />

私はこれをしなければなりませんでした：

<td colSpan={6} />
19
Nathan Arthur

colspanプロパティは、colSpanのようなcamelCaseにあります。したがって、colspanの代わりにcolSpanを使用する必要があります。 colSpan='4'およびcolSpan={4}。

1
Priyanka Sharma
<td colSpan={2}>ABC</td>

2列にまたがる、これは私にとってはうまくいきました。

0
Rahul Chitte