时间戳

首页 > 解决方案 > 警告：收到非布尔属性“alt”的“false”

reactjs - 警告：收到非布尔属性“alt”的“false”

问题描述

我正在尝试将道具传递到我配置的样式化组件按钮中，但它显示以下错误：

Warning: Received `false` for a non-boolean attribute `alt`.

这是我配置按钮的地方

const StyledButton = styled.button`
    background-color: ${(props) => (props.alt ? "red" : "white")};
    color: black;
    font: inherit;
    border: 1px solid purple;
    padding: 8px;
    cursor: pointer;

    &:hover {
        background-color: ${(props) => (props.alt ? "salmon" : "lightgreen")};
        color: black;
    }
`;

这就是我调用按钮并将值传递给 alt 的地方（仅供参考：showPerson 的值是布尔值）：

const Cockpit = (props) => {
    return (
        <div>
            <StyledButton alt={props.showPerson} onClick={() => props.toggle()}>
                Switch Name
            </StyledButton>
        </div>
    );
};

标签： reactjsstyled-components

解决方案

alt 是一个官方的 HTML 属性名称。我知道这是一个按钮，而不是图像，但仍然最好为道具使用不同的名称 – Jayce444 1 分钟

推荐阅读