javascript - example - React no funciona colspan
user interface javascript (3)
Además de cambiar el caso, también tuve que cambiar el valor de una cadena a un número. En lugar de esto:
<td colspan=''6'' />
Tuve que hacer esto:
<td colSpan={6} />
¿Por qué el atributo colspan no tiene efecto en React? Creé un componente simple que hace lo siguiente:
<table border="1">
<tr>
<th colspan="2">people are...</th>
</tr>
<tr>
<td>monkeys</td>
<td>donkeys</td>
</tr>
</table>
y lo que obtengo es:
¿Me estoy perdiendo de algo?
Edición: resuelto
Aquí está la solución. React espera que el nombre del atributo sea colSpan , no colspan. Descubrí esto después de perder una ridícula cantidad de tiempo para descubrir este pequeño hecho malvado.
De la documentación de las diferencias de DOM de React:
Todas las propiedades y atributos de DOM (incluidos los controladores de eventos) deben ser camelCased para ser coherentes con el estilo de JavaScript estándar.
Si verifica la consola de su navegador, verá que React le advierte sobre esto:
<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
colspan propiedad colspan está en camelCase como colSpan . Así que en lugar de colspan necesitamos usar colSpan . Funciona tanto con colSpan=''4'' como con colSpan={4} .