为什么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。在浪费了大量可笑的时间来发现这个小小的邪恶事实之后,我发现了这一点。
发布于 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 App
发布于 2017-08-23 05:56:52
除了更改大小写之外,我还必须将值从字符串更改为数字。
而不是这样:
<td colspan='6' />
我不得不这么做:
<td colSpan={6} />
发布于 2017-08-23 15:25:15
与colSpan
一样,colspan
属性也在camelCase中。因此,我们需要使用colSpan
而不是colspan
。
在React v16.12中,您仍然可以将值作为int
提供,如so colSpan={4}
或string
,如:colSpan="4"
。
https://stackoverflow.com/questions/38302507
复制相似问题