Javascript 反应 colspan 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38302507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React colspan not working
提问by Tuomas Toivonen
Why colspan attribute doesn't have effect in React? I created simple component which renders the following:
为什么 colspan 属性在 React 中不起作用？我创建了呈现以下内容的简单组件：
<table border="1">
<tr>
<th colspan="2">people are...</th>
</tr>
<tr>
<td>monkeys</td>
<td>donkeys</td>
</tr>
</table>
and what I get is:
我得到的是：
Am I missing something?
我错过了什么吗？
Edit: SOLVED
编辑：已解决
Here is the solution. React expects the attribute name as colSpan, not colspan. Figured this out after wasting ridiculous amount of time to discover this little evil fact.
这是解决方案。React 期望属性名称为colSpan，而不是 colspan 。在浪费了荒谬的时间来发现这个邪恶的小事实之后想通了这一点。
回答by Jonny Buchanan
From React's DOM Differencesdocumentation:
来自 React 的DOM 差异文档：
All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style.
所有 DOM 属性和属性（包括事件处理程序）都应该是驼峰式的，以与标准的 JavaScript 风格保持一致。
If you check your browser's console, you'll see that React warns you about this:
如果您检查浏览器的控制台，您会看到 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
回答by Nathan Arthur
In addition to changing the case, I also had to change the value from a string to a number.
除了更改大小写外，我还必须将值从字符串更改为数字。
Instead of this:
取而代之的是：
<td colspan='6' />
I had to do this:
我不得不这样做：
<td colSpan={6} />
回答by Priyanka Sharma
colspanproperty is in camelCase like colSpan. So instead of colspanwe need to use colSpan. It works with both colSpan='4'and colSpan={4}.
colspan属性是像驼峰一样colSpan。因此，colspan我们需要使用colSpan. 它适用于colSpan='4'和colSpan={4}。
回答by Rafalfaro
I had to put colSpan at the end before closing the opening tag for some reason it wasn't working in the beginning as the first prop.
在关闭开始标签之前，我不得不将 colSpan 放在最后，因为某种原因它在开始时无法作为第一个道具工作。
