Question

我的控制台上出现上述错误的随机实例，但是错误的行为似乎不可预测。根据我的理解，我得到了这个错误，因为我已经将一个布尔属性（例如“ small”或“ green”或“ primary”或类似的东西）传递给了样式组件，并将其直接传递给DOM项。但是，如果您查看自己拥有的documentation样式化组件（在“基于道具的适应”下），您会发现我所谈论的确切场景似乎是标准行为。我应该可以说一下，然后根据默认为“ true”的那个属性做一些事情。

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

来自NumericInput.js

<DropdownArrowIcon small rotate />

两个道具都是隐含的布尔型道具，对不对？现在看，我对每个对象所做的事情都完全相同：

DropdownArrowIcon.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，请改为传递一个字符串：   rotation =“ true”或rotate = {value.toString（）}。

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

是什么原因导致React或样式化组件抛出“旋转”而不是“小”错误？
鉴于这种传递道具模式的实例是样式化组件官方文档的一部分，为什么要抛出错误？

编辑：附加示例：

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

Button.js

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

Answer 1

是什么原因导致React或样式化组件抛出“旋转”而不是“小”错误？

rotate是svg元素上的有效属性。样式化的组件正在通过此道具，而React正在验证这些属性。

来自样式化组件文档：

如果样式目标是一个简单元素（例如styled.div），则样式组件会通过任何已知的HTML属性传递给DOM。如果它是自定义的React组件（例如styled（MyComponent）），则样式化组件会通过所有道具。

这说明了为什么rotate被通过（并被验证）而small没有被通过。

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

似乎仅在使用样式组件的情况下有时会发生“收到非布尔属性的'true`”错误

1 个答案: