警告：收到非布尔属性的“假”。如何传递布尔值？

Question

下面的代码给了我这个错误：

react-dom.development.js:67 警告：收到false 的非布尔属性high。如果要将其写入 DOM，请改为传递字符串：high="false" 或 high={value.toString()}。

我尝试了各种方法，但按钮的颜色不会根据道具值而改变。

import styled from 'styled-components';

const Button=styled.button`
    border:none;
    background:${(props) => (props.high ? 'red':'orange')};
    color:white;
`
        
export const getStaticProps = async () => {
    const res = await fetch('http://localhost:8000/issues');
    const data = await res.json();
          
    return {
        props: { cards: data }
    }
}
        
          
const issues = ({cards}) => {
        
    return ( 
        <>
            <div className="container">
                {cards.map(card => (
                    <div className="grid-item link" key={card.id}>
                        <Link href={'/issues/' + card.id}>
                            <div>
                               <Button high={card.priority === "high"} className="priority">{ card.priority } Priority</Button>
                            </div>
                        </Link>
                    </div>
                ))}
            </div>
        </>
    );
}

Answer 1

这里有两个单独的问题 - 您收到的错误和按钮不响应优先级道具更改的事实。

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

但是你在哪里做呢？从表面上看，您正在使用由样式组件返回的非本地 Button 组件，那么您在哪里将属性传递给实际的本地元素？好吧，发生的事情是，styled-components 基本上会通过你传递给它的任何道具——所以如果你用 styled 函数包装了本机按钮组件，属性“high”将被传递给本机底层按钮。

这真的有问题吗？老实说，我不认为这很糟糕，如果你愿意，你可以忽略警告 - 虽然实际生成的 html 标记将包含此属性，但它看起来会很奇怪 - 你可以通过浏览器元素检查器确认这一点。

如果你确实想解决这个警告，我知道有两种方法：

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

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

您会注意到我使用了一个名为 clsx 的实用程序来进行条件连接类，还有像 classnames 这样的替代方法。你也可以通过 vanilla 连接类来实现这一点。 这个解决方案有潜在的类名冲突的缺点——所以必须小心使用。您可以使用“高优先级按钮”等更具体的类来缓解这种担忧。

1. 不要直接包装原生按钮：

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

这种方式你不会将“high”属性传递给原生按钮，它只用于样式化组件的功能插值。这样做的缺点是它很麻烦而且冗长，而且由于添加了另一个函数调用层，因此性能可能会稍差。

您的其他问题（颜色实际上没有改变）似乎无关，可能是由其他原因引起的，因此此警告可能是误导。我建议在某处记录优先级道具，您可以在优先级到达组件之前查看优先级是否确实发生了变化。