Reatt colspan non funziona

Question

Perché l'attributo colspan non ha effetto in React? Ho creato semplice componente che rende il seguente:

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

e quello che ottengo è:

mi sto perdendo qualcosa?

Edit: RISOLTO

Ecco la soluzione. React si aspetta che il nome dell'attributo sia colSpan, non colspan. Capito questo dopo aver perso una quantità ridicola di tempo per scoprire questo piccolo fatto malvagio.

Answer 1

Da Reagire di documentazione DOM Differences:

Tutte le proprietà DOM e gli attributi (inclusi i gestori di eventi) devono essere in formato camelCase essere coerenti con lo stile standard di JavaScript.

Se si controlla console del browser, vedrai che Reagire si avverte a questo:

<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

Oltre a modificare il caso, ho avuto anche per cambiare il valore da una stringa a un numero. Invece di questo:

<td colspan='6' /> 

ho dovuto fare questo:

<td colSpan={6} />