Question

我听说Jsx不支持class属性。但是现在它运行良好。 React何时开始在jsx中支持class属性

Answer 1

根据经验，它始于v16.0.0。 ~~从官方上来说，我不认为React支持使用class：the docs仍然说要使用className，并且在the changelog中我对此没有改变。~~实际上，文档可能已过时，Dinesh points out这是React Fire的一部分（而且票证上说{v1仍受class支持[className作品]）。

React v15的示例（无效）：

ReactDOM.render(
  <div class="foo">Testing</div>,
  document.getElementById("root")
);

.foo {
  color: green;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

React v16.0.0的示例（可以工作；当前版本比此版本晚很多，仅供参考）：

ReactDOM.render(
  <div class="foo">Testing</div>,
  document.getElementById("root")
);

.foo {
  color: green;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>

要完全清楚，这从来都不是JSX的事情（JSX可以用class代替className很好），它是/是React的东西。 React使用className而不是class来支持过时的浏览器，例如IE8，该浏览器不允许在对象初始值设定项（“对象文字”）的属性初始值设定项中使用class，因为它们尚未针对ES5的更改允许关键字作为属性初始化程序中的属性名称。

那很重要，因为这是JSX：

<div class="foo">howdy</div>

...使用React的默认配置转换为此：

React.createElement("div", {class: 'foo'}, 'howdy')

...在ES3和更早版本中无效（因为class是将来的保留字 [现在是关键字]），但在ES5 +中有效。

Answer 2

来自React 16。

提案中有一组名为React Fire的新变更代码。 class现在可以与React 16一起使用，但仍会在控制台中显示警告消息。但是将来（希望在React 17中），类将成为事实上的写类名的方法。

这是提案的摘录

className→class已提出无数次。我们是已经允许在React 16中将类传递到DOM节点。造成的混乱是不值得的语法限制试图防止。我们不会自己进行此更改，但是与上面的其他所有内容结合起来是有意义的。请注意，我们不能只是允许两者都没有警告，因为这对于组件生态系统来处理。每个组件都需要学习正确处理两者，并且存在冲突的风险。以来许多组件处理className（例如通过附加到className），太容易出错了。

更多在这里

https://github.com/facebook/react/issues/13525

Answer 3

扩展，它来自React 16。

2017年4月18日，Facebook根据wiki发布了React Fiber。请参见docs中的以下注释：

光纤是React 16中的新协调引擎。它的主要目标是启用虚拟DOM的增量呈现。

在文档本身中了解有关此内容的更多信息。还要观看此video。如果您还有更多时间，请观看video

另外，请看一下note from Dan Abramov：

光纤不是新的React API。内部结构已更改，但API保持不变。与Fiber本身相关的React 16几乎没有重大变化。

我们在React 16中确实做了一些重大更改（例如，将createClass移到另一个包中）。它们与Fiber完全无关，是我们常规弃用周期的一部分。如15.5.0博客文章中所述，我们提供了自动脚本（“ codemods”）从过时的API更新您的代码，并为您提供了迁移时间。如果您在使用15.x时没有看到任何警告，则表示您的代码准备就绪，可用于React 16。

并进一步了解New Versioning Scheme和blog more about React 16。

React何时开始在jsx中支持'class'属性

3 个答案: