리액트 콜스판이 작동하지 않음

리액트 콜스판이 작동하지 않음

colspan 속성이 React에 적용되지 않는 이유는 무엇입니까?다음과 같은 간단한 컴포넌트를 작성했습니다.

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

그리고 내가 얻는 것은:

내가 뭘 빼놓았나요?

편집: 해결됨

여기 해결책이 있습니다.React는 Atribute 이름을 colspan이 아닌 colSpan으로 예측합니다.이 작은 사악한 사실을 알아내기 위해 터무니없이 많은 시간을 허비하고 나서 이 사실을 알아냈지

대소문자를 변경하는 것 외에 문자열에서 숫자로 값을 변경해야 했습니다.

이것 대신:

<td colspan='6' />

어쩔 수 없었어요

<td colSpan={6} />

React의 DOM Differences 문서에서 다음과 같이 하십시오.

모든 DOM 속성 및 속성(이벤트 핸들러 포함)은 표준 JavaScript 스타일과 일치하도록 camelCase로 해야 합니다.

브라우저의 콘솔을 확인하면 React가 이에 대해 경고하는 것을 알 수 있습니다.

<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

colspan속성은 camelCase와 같습니다.colSpan그래서 대신colspan사용할 필요가 있다colSpan.

React v16.12에서도 다음과 같이 값을 제공할 수 있습니다.int이렇게colSpan={4}또는string다음과 같은 경우:colSpan="4".

조금 다른 경우가 있었지만, 최종적인 해결책은 실제로 TD를display: table-cell;소유물.

처음에 첫 번째 소품으로는 colSpan이 작동하지 않아 오프닝 태그를 닫기 전에 마지막에 colSpan을 넣어야 했습니다.

tr에서 td를 1개만 사용하여 colSpan을 시도했지만, 저는 잘 되지 않았고, 같은 tr에 빈 td를 하나 더 넣으면 동작했습니다.그래서 코드는 이렇게 생겼습니다.

<table>

<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>

<tr>
<td colSpan={3}>lorem ipsum</td>
<td></td> <-- Using this empty <td> worked
</tr>

</table>

마지막 빈 td를 사용함으로써 나는 효과가 있었다.

언급URL : https://stackoverflow.com/questions/38302507/react-colspan-not-working