Реакция colspan не работает

Почему атрибут colspan не действует в React? Я создал простой компонент, который отображает следующее:

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

и я получаю:

Я что-то пропустил?

Изменить: SOLVED

Вот решение. React ожидает имя атрибута как colSpan, а не colspan. Выяснил это после того, как потратил на себя смехотворное количество времени, чтобы обнаружить этот маленький злой факт.

Ответы

Ответ 1

От React Документация DOM Differences:

Все свойства и атрибуты DOM (включая обработчики событий) должны быть camelCased, чтобы соответствовать стандарту JavaScript-стиля.

Если вы проверите консоль своего браузера, вы увидите, что 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>

Ответ 2

В дополнение к изменению случая мне также пришлось изменить значение из строки в число. Вместо этого:

<td colspan='6' />

Я должен был сделать это:

<td colSpan={6} />

Ответ 3

Свойство colspan находится в camelCase, как colSpan. Поэтому вместо colspan нам нужно использовать colSpan. Работает как с colSpan='4' и с colSpan={4}.

Ответ 4

азбука

Охватил две колонки, это сработало для меня.