反应colspan不起作用

Posted 2023-02-21

【中文标题】反应colspan不起作用

【英文标题】：React colspan not working

【发布时间】：2016-11-13 03:19:54

【问题描述】：

为什么 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。在浪费了可笑的时间来发现这个邪恶的小事实之后，才发现了这一点。

【问题讨论】：

我看到你的代码没有问题。你能告诉更多细节吗？这是小提琴。您可以看到 colspan 运行良好。 jsfiddle.net/m2jknr70

阅读编辑后的帖子。 React 不喜欢老式的 html 语法

请创建答案而不是将其添加到问题文本中。在 SO 上回答您自己的问题是完全合法的。

【参考方案1】：

来自 React 的 DOM Differences 文档：

所有 DOM 属性和属性（包括事件处理程序）都应采用驼峰命名法以与标准 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

【参考方案2】：

除了更改大小写之外，我还必须将值从字符串更改为数字。

而不是这个：

<td colspan='6' />

我必须这样做：

<td colSpan=6 />

【讨论】：

该解决方案帮助我使用 TypeScript 进行 React。谢谢

【参考方案3】：

colspan 属性采用驼峰命名法，如colSpan。所以我们需要使用colSpan，而不是colspan。

在 React v16.12 中，您仍然可以将值提供为 int，例如 colSpan=4 或 string，例如：colSpan="4"。

【讨论】：

没关系——HTML标签名和属性名不区分大小写

@fen1x React 比普通 HTML 严格得多。

@fen1x 反应确实很重要，我在当前项目中也经历过。

@fen1x 其实不是HTML，叫JSX，跟HTML很像。

【参考方案4】：

我不得不在关闭开始标签之前将 colSpan 放在末尾，因为某种原因它在开始时作为第一个道具不起作用。

【参考方案5】：

我有一点不同的情况，但对我来说最终的解决方案是实际上给 th/td 一个 display: table-cell; 属性。