Question

我在传递道具时具有以下svg组件。

import React from 'react';
export default (props) => (
  <svg {...props}>
    <path
      d="M11.5 16.45l6.364-6.364"
      fillRule="evenodd"
    />
  </svg>
);

然后我有一个styled-component，看起来像这样。

const Icon = styled(_Icon)`
  ${props =>
    props.isActive &&
    css`
      transform: rotate(-180deg);
    `};
`;

我看到以下react错误。

警告：React无法识别DOM元素上的isActive道具。

Answer 1

我在样式组件方面遇到了同样的问题，最终我做了这样的事情：

op

Answer 2

const StyledIcon = styled(({ isActive, ...props }) => <Icon {...props} />)`
  ${props =>
    props.isActive &&
    css`
      transform: rotate(-180deg);
    `};
`

是一种更简单的解决方案，它也可以防止属性不必要地呈现到 DOM 中

React无法识别DOM元素上的`isActive`属性-样式组件

2 个答案: