Question

有类似的东西

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文档指向此行为？

Answer 1

有没有我错过的React文档指出这种奇怪的行为？

不，这与React没什么关系。似乎jsx语法被转换为对象文字，因此它们的属性规则也适用于属性。

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

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

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

Answer 2

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

我个人认为这些限制是合理的，如果你使用XHTML就可以自动验证文件，其他人则更喜欢它更灵活，更不严格。

Answer 3

不能解释为什么它会破坏IE，而是一种处理多个classNames的推荐方法。

使用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做一些很酷的事情，比如根据bool标志启用类等。

e.g。

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

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

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

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

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

为什么IE上的className的多个声明会破坏app？

3 个答案: