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:
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.
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
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} />
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}
.
<td colSpan={2}>ABC</td>
Span deux colonnes, cela a fonctionné pour moi.