Javascript 警告：收到非布尔属性的'false'。如何传递布尔值？

以下代码给出了此错误：

react dom.development.js:67警告：对于非布尔属性

高

，已收到

false

。如果要将其写入DOM，请传递一个字符串：high=“false”或high={value.toString（）}

我试过各种各样的东西，但是按钮的颜色不会根据道具值而改变

从“样式化组件”导入样式化；
const Button=styled.Button`
边界：无；
背景：${（道具）=>（props.high？'red'：'orange'）；
颜色：白色；
`
export const getStaticProps=async（）=>{
const res=等待取数（'http://localhost:8000/issues');
const data=wait res.json（）；
返回{
道具：{卡片：数据}
}
}
常量问题=（{cards}）=>{
报税表（
{cards.map（card=>(
{card.priority}优先级
))}
);
}

这里有两个独立的问题-您收到的错误和按钮没有响应优先级属性更改的事实

让我们来解决第一个问题-当React告诉您它收到一个非布尔属性的布尔值时，这意味着您用于button元素的属性“high”未被识别为本机html元素的合法属性，因此React警告您，向该属性传递值没有任何意义

但你在哪里这么做？表面上，您使用的是一个由样式化组件返回的非本机按钮组件，那么您在哪里将属性传递给实际的本机元素呢？好的，所发生的是，样式化组件基本上会通过您传递给它的任何道具-因此，如果您用样式化函数包装了本机按钮组件，那么属性“high”将传递给本机底层按钮

这真的是个问题吗？老实说，我不认为这有多可怕，如果你想的话，你可以忽略这个警告——虽然实际生成的html标记会包含这个属性，但这看起来很奇怪——你可以通过浏览器元素检查器来确认这一点

如果您确实想解决此警告，我知道两种方法：

使用类而不是样式化组件函数插值应用“高”条件样式：

const-Button=styled.Button`
边界：无；
背景：橙色；
&.高{
背景：红色；
}
颜色：白色；
`

您会注意到，我使用了一个以条件连接类命名的实用程序，有如下替代方法。您还可以通过连接类来实现这一点。 这种解决方案有潜在类名冲突的缺点，因此必须谨慎使用。您可以使用更具体的类（如“高优先级按钮”）来缓解此问题

不要直接包装本机按钮：

const按钮=已设置样式(
（{high，…rest}）=>
)`
边界：无；
背景：${（道具）=>（props.high？'red'：'orange'）；
颜色：白色；
`

这样，您就不会将“high”属性传递给本机按钮，它只用于样式化组件的函数插值。这样做的缺点是，它既麻烦又冗长，而且性能可能稍差，因为它添加了另一个函数调用层

---

你的另一个问题，即颜色实际上没有改变，似乎是无关的，可能是由其他原因引起的，所以这个警告可能是一个误导。我建议将优先级道具记录在某个地方，这样您就可以看到优先级在到达组件之前是否确实发生了变化。

如何在js文件中定义clsx？如果您正在使用Create React App/另一个网页包安装程序进行安装，您可以运行“npm install clsx”在项目根目录下的命令行上，然后在文件顶部：“import clsx from'clsx'”。我建议你打开我提供的npm页面的链接，这里会进一步解释。

const Button = styled.button`
 border: none;
 background: orange;
 &.high {
    background: red;
  }
 color: white;
`
<Button className={clsx("priority", { 
high: priority==="high"  
})}
/>

const Button = styled(
({high, ...rest} )=> <button {...rest}/>
)`
    border: none;
    background: ${(props) => (props.high ? 'red':'orange')};
    color: white;
`