为什么 IE 上的多个 className 声明会破坏应用程序？答案

【问题标题】：Why do multiple declarations of className on IE breaks app?为什么 IE 上的多个 className 声明会破坏应用程序？
【发布时间】：2016-05-27 11:24:45
【问题描述】：

有这样的东西

this.props.colour = 'red'
<MyComponent {…this.props} colour="blue">

或者这个

<div className="red" className="blue"></div>

这确实很奇怪，会在 IE 上破坏您的网站。我得到了一个完全空白的页面，这似乎是一个非常苛刻的反应。

实际错误是

SCRIPT1046: Multiple definitions of a property not allowed in strict mode

记录在here。

Chrome 和 FF 似乎可以通过忽略第一个声明来处理这个问题。

是否有任何我错过了指向这种行为的 React 文档？

【问题讨论】：

这是一个绝对有意义的限制，但在 ES6 中由于计算属性而放宽了。这就是为什么它在 Chrome 中有效，但在实现（正确但）过时行为的浏览器中无效。总之，不要这样做。
谢谢@Bergi。如果你不介意写下你的评论作为答案，扩展它在 ES6 中被放宽的原因并添加对文档或其他内容的引用，我会很乐意接受它。以防万一其他人偶然发现它。

标签： javascript internet-explorer reactjs strict

【解决方案1】：

是否有任何我错过了指出这种奇怪行为的 React 文档？

不，这与 React 没有太大关系。似乎 jsx 语法被转译为对象字面量，因此它们的属性规则也适用于属性。

IE 抛出 严格模式下不允许的属性的多个定义，但 Chrome 和 FF 似乎通过忽略第一个声明来处理这个问题。

这是一个绝对有意义的限制，但在 ES6 中由于计算属性而放宽了 - 有关详细信息，请参阅 What's the purpose of allowing duplicate property names?。这就是为什么它可以在 Chrome 中运行，但不能在实现（正确但）过时行为的浏览器中运行。

总之，只要不做奇怪的事情，它就不会表现得很奇怪。

【讨论】：

【解决方案2】：

在 XHTML 中拥有多个相同的属性键是没有意义的，这在 XML 中被认为是一个错误，因此它也被传播到看起来很像 XML 但不那么严格的 HTML。这就是 XML 的工作原理。您对 JSON 有相同的行为，键在树的给定级别必须是唯一的。

我个人认为这些限制是合理的，如果您使用 XHTML，则允许自动验证文档，其他人更喜欢它更灵活且不那么严格。

【讨论】：

【解决方案3】：

不是解决它在 IE 上中断的原因，而是处理多个类名的推荐方法。

使用classnames 包 (https://github.com/JedWatson/classnames)。

npm install classnames --save

那么你可以像这样使用它：

import styles from './styles.scss';
import classNames from 'classnames';

function MyComponent(props) {
  // we could possibly receive a class from outside the component
  // as a prop.
  const propClassName = props.className;

  // We use `classNames` function to merge two classnames. 
  return (
   <div className={classNames(styles.root, propClassName)}>
     Hello world
   </div>
  )
}

这样，您仍然可以将多个类应用于您的组件，而无需重复的 prop 声明。如果是上述情况，如果传入的 prop 为 nil，则仅应用 styles.root 类。

查看他们的其余文档，您可以使用 classnames 做一些很酷的事情，例如启用基于布尔标志的类等。

例如

const fullClassName = classNames(
  styles.root,
  { 'active': props.active }
);

在上面的示例中，只有当 props.active 为真时才会应用“active”类。

您还可以使用 ES6 计算属性名称从导入的样式表中使用一个类。例如：

const fullClassName = classNames(
  styles.root,
  { [styles.active]: props.active }
);

如您所见，这为您的组件打开了大量的自定义选项。

【讨论】：