React colspan不工作
React colspan不工作
提问于 2016-07-11 16:37:04
为什么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。在浪费了大量可笑的时间来发现这个小小的邪恶事实之后，我发现了这一点。
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-07-11 17:38:02
来自React的DOM Differences文档：
所有的DOM属性和属性(包括事件处理程序)都应该是camelCased的，以便与标准的JavaScript样式一致。
如果你检查你的浏览器控制台，你会看到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 AppStack Overflow用户
发布于 2017-08-23 05:56:52
除了更改大小写之外，我还必须将值从字符串更改为数字。
而不是这样：
<td colspan='6' />我不得不这么做：
<td colSpan={6} />Stack Overflow用户
发布于 2017-08-23 15:25:15
与colSpan一样，colspan属性也在camelCase中。因此，我们需要使用colSpan而不是colspan。
在React v16.12中，您仍然可以将值作为int提供，如so colSpan={4}或string，如：colSpan="4"。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38302507
复制相关文章
相似问题