时间戳

首页 > 解决方案 > “收到 `true` 的非布尔属性”错误似乎只发生在样式化组件中

reactjs - “收到 `true` 的非布尔属性”错误似乎只发生在样式化组件中

问题描述

我的控制台到处都是上述错误的随机实例，但错误的行为似乎无法预测。据我了解，我收到此错误是因为我已将布尔道具（如“小”或“绿色”或“主要”或类似的东西）传递给样式组件，后者将其直接传递给 DOM 项目。但是，如果您查看 styled-components 自己的文档（在 Adapting Based on Props 下），您会发现我正在谈论的确切场景似乎是标准行为。我应该能够根据默认为“true”的那个道具说然后做一些事情。

有时我的应用程序似乎对此没有问题，而在其他情况下它会标记它。这个例子就是一个完美的例证。

来自 NumericInput.js

<DropdownArrowIcon small rotate />

两个道具都是隐含的布尔道具，对吧？现在看我对每一个都做同样的事情：

下拉箭头图标.js

const DropdownArrowIcon = ({small, rotate, ...props}) => (
  <Icon  xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24"
    small={small}
    rotate={rotate}
  >
    <path d="M2 8l10 10 10-10z" />
  </Icon>
);

const Icon = styled.svg`
  width: ${props => props.small ? '13px' : '20px'};
  height: ${props => props.small ? '13px' : '20px'};
  text-align: center;
  vertical-align: middle;

  transform: ${props => props.rotate ? 'rotate(180deg)' : 'inherit'};

`

然而在我的控制台中，我只收到一个错误：

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

如果要将其写入 DOM，请改为传递字符串：rotate="true" 或 rotate={value.toString()}。

我在这里的两个主要问题：

  1. 是什么导致 React 或 styled-components 为“旋转”而不是“小”抛出错误？
  2. 既然它是 styled-components 官方文档的一部分，为什么这种传递 props 模式的任何实例都会抛出错误？

编辑：附加示例：

<Button pink
  buttonText="Save Changes"
  buttonSize="small"
 />

按钮.js

<SmallButton
          variant="contained"
          size="small"
          onClick={handleClick}
          pink={pink}
          {...props}
        >
          {buttonText}
        </SmallButton>

标签： reactjsstyled-components

解决方案

是什么导致 React 或 styled-components 为“旋转”而不是“小”抛出错误？

rotate是svg元素的有效属性。styled-components 正在通过这个 prop 并且 React 正在验证这些属性。

来自 styled-component 文档：

如果样式化的目标是一个简单的元素（例如 styled.div），那么 styled-components 会将任何已知的 HTML 属性传递给 DOM。如果是自定义的 React 组件（例如 styled(MyComponent)），styled-components 会通过所有的 props。

这解释了为什么rotate通过（并验证）但small没有通过。

如果您不希望它通过，请尝试将其重命名为不是 DOM 属性的属性，例如：iconRotate.

推荐阅读