it-swarm.com.ru

React colspan не работает

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

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

и что я получаю это:

enter image description here

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

Редактировать: решено

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

32
Tuomas Toivonen

Из React's DOM Differences документация:

Все свойства и атрибуты DOM (включая обработчики событий) должны быть в CamelCase, чтобы соответствовать стандартному стилю 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>

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

Помимо изменения регистра, мне также пришлось изменить значение с строки на число. Вместо этого:

<td colspan='6' />

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

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

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

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

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

0
Rahul Chitte