为什么colspan属性在React中不起作用?我创建了呈现以下内容的简单组件:
<table border="1"> <tr> <th colspan="2">people are...</th> </tr> <tr> <td>monkeys</td> <td>donkeys</td> </tr> </table>
编辑:解决
这是解决方案。React期望属性名称为 colSpan ,而不是colspan。在浪费了荒谬的时间去发现这个小小的邪恶事实之后,想出了这一点。
来自React的DOM差异文档:
所有DOM属性和属性(包括事件处理程序)都应包含驼峰,以与标准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