javascript - React 无法识别 DOM 元素上的 `isActive` 属性 - styled-components
问题描述
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 无法识别
isActive
DOM 元素上的 prop。
解决方案
const StyledIcon = styled(({ isActive, ...props }) => <Icon {...props} />)`
${props =>
props.isActive &&
css`
transform: rotate(-180deg);
`};
`
是不是更简单的解决方案,它还可以防止属性被不必要地呈现给 DOM
推荐阅读
- macos - 在 macOS 中找不到 Python.h 编译 C 程序
- python - 在 Python 中对列表/文件进行排序
- r - 移动数据框列
- python - 由于目录错误,Python 找不到我的文件
- python - 如何有效地计算 Dask/xarray 中轴中值的第一个实例?
- doctrine-orm - Symfony 使用外键查询数据库
- powershell - 如何在powershell中对hastable属性执行where-object?
- python - 从整数字符串返回最大值和最小值
- javascript - 联系表格不发送电子邮件,问题代码?
- url - SSRS Action Expression - 使用字段值作为 url 打开一个新页面