渲染时警告:收到非布尔属性"className"的"true"

Question

G为div容器和span.text设置以下错误：

警告：收到非布尔属性className的true。

如果要将其写入DOM，请传递一个字符串：className="真"；或className=｛value.toString((｝.

return (
Array.isArray(contactDetails) &&
contactDetails.map((item, index) => {
return item.type === DIVIDER ? (
<div key={index}>
<Divider variant={"middle"} className={classes.divider} />
<div className={classes.dividerText}>{item.text}</div>
</div>
) : (
item.text && (
<div className={classes.container} key={index}>
<div className={classes.icon}>{item.icon}</div>
<span className={classes.text}>{item.text}</span>
</div>
)

Answer 1

您的classes道具之一是boolean。不能将boolean(真/假(推送到className。

你可以console.log(classes)，然后你会看到，是哪个道具引起了警告。

Answer 2

这意味着至少有一个className值是布尔值，而不是字符串。对于这段代码，我们不能再多说什么了。

Answer 3

当我没有像下面这样给className属性赋值时，我得到了同样的错误，可能你的一个变量是null或boolean等。

<img className src={...} .../>