web-dev-qa-db-fra.com

Réagir colspan ne fonctionne pas

Pourquoi l'attribut colspan n'a pas d'effet dans React? J'ai créé un composant simple qui rend ce qui suit:

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

et ce que je reçois c'est:

 enter image description here

Est-ce que je manque quelque chose?

Edit: RESOLU

Voici la solution. React attend le nom de l'attribut sous la forme colSpan, et non pas colspan. Compris cela après avoir perdu une quantité ridicule de temps à découvrir ce petit fait pervers.

javascripthtmluser-interfacedomreactjs
22
Tuomas Toivonen

De React's Différences DOM documentation:

Toutes les propriétés et tous les attributs du DOM (y compris les gestionnaires d’événements) doivent avoir une propriété camelCas afin d’être cohérents avec le style JavaScript standard.

Si vous vérifiez la console de votre navigateur, vous verrez que React vous avertit de ceci:

<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
29
Jonny Buchanan

En plus de changer le cas, je devais aussi changer la valeur d'une chaîne en un nombre. Au lieu de cela:

<td colspan='6' />

Je devais faire ceci:

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

La propriété colspan est dans camelCase comme colSpan. Ainsi, au lieu de colspan, nous devons utiliser colSpan. Cela fonctionne avec colSpan='4' et colSpan={4}.

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

Span deux colonnes, cela a fonctionné pour moi.

0
Rahul Chitte