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

Question

The below code is giving me this error:

react-dom.development.js:67 Warning: Received false for a non-boolean attribute high . If you want to write it to the DOM, pass a string instead: high="false" or high={value.toString()}.

I have tried various stuff but the color of the button doesn't change based on the prop value.

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

There are two separate issues here - the error you are receiving and the fact that the button doesn't respond to the priority prop changing.

Let's address the first problem - when React tells you that it received a boolean value for a non boolean attribute, it means that the attribute 'high' you've used for the button element isn't recognized as a legal attribute for the native html element - and therefore React is warning you that passing a value to that attribute doesn't make any sense.

But where are you doing that? Ostensibly you are using a non native Button component, returned by styled-components, so where are you passing the attribute to the actual native element? Well, what happens is, styled-components will basically pass through any props that you pass to it - so if you've wrapped the native button component with the styled function, the attribute "high" will be passed to the native underlying button.

Is that really a problem? Honestly I don't think it's that terrible, and you can maybe just ignore the warning if you want - it will look strange though that the actual generated html markup will include this attribute - you can confirm this through a browser element inspector.

If you do want to solve this warning, I know of two ways:

1. Apply the 'high' conditional styling using classes instead of styled-component functional interpolation:

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

You'll notice I've used a utility named clsx for conditionally concatenating classes, there are alternatives like classnames . You can also accomplish this with vanilla concatenating the classes. This solution has the downside of potential classname clashes - so it must be used carefully. You may mitigate this concern with a more specific class like "high-priority-button".

2. Don't wrap the native button directly:

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

This way you dont pass the "high" attribute to the native button, and it is only used for the styled components functional interpolation. The downside to this is that it is cumbersome and verbose, and potentially slightly less performant because it adds another function-call layer.

Your other problem, where the color doesn't actually change, seems unrelated and may be caused by other reasons, so this warning is probably a misdirection. I suggest logging the priority prop somewhere, and you may be able to see if the priority actually does change when it is supposed to, before it reaches the component.