Use Transient props

Question

我在React应用程序中具有以下样式化组件，可以按预期工作：

const BaseButton = styled(Button)<{ borderColor: string }>`
  border-color: ${({ borderColor }): string => borderColor};
`;

但是它会在控制台中生成以下警告消息：

React无法识别DOM元素上的borderColor属性。如果您有意希望它作为自定义属性出现在DOM中，改为将其拼写为小写bordercolor。如果你不小心从父组件传递它，将其从DOM元素中删除。

为了避免这种情况，我尝试实施documentation

中提出的解决方案

文档示例：

import styled from 'styled-components'
import Header, { Props as HeaderProps } from './Header'

const Title =
  styled <
  { isActive: boolean } >
  (({ isActive, ...rest }) => <Header {...rest} />)`
  color: ${props => (
  props.isActive ? props.theme.primaryColor : props.theme.secondaryColor
)}
`

我的原始代码遵循以下示例：

const BaseButton = styled <
{ borderColor: string } >
(({ borderColor, ...rest }) => <Button {...rest} />)`
  border-color: ${({ borderColor }): string => borderColor};
`;

但是我收到以下错误消息：

解析错误：预期为“>”

错误指向<Button {rest...} />

这是我的.babelrc配置，以防万一：

{
  "presets": ["@babel/env", "@babel/typescript", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/transform-runtime",
    "@babel/plugin-transform-modules-commonjs"
  ]
}

Answer 1

Use Transient props

TL; DR只会在您的属性之前加上$符号。例如$borderColor，$black，$any，$attribute。

如果要防止将样式组件要使用的道具传递到基础React节点或呈现给DOM元素，则可以在道具名称前加一个美元符号（$），将其转换为瞬态道具。

// typescript example
const BaseButton = styled(Button)<{ $borderColor: string }>`
    border-color: ${({ $borderColor }): string => $borderColor};
`;

// js
const BaseButton = styled(Button)`
    border-color: ${({$borderColor}) => $borderColor}
`;

// usage
<BaseButton $borderColor="red">Button</BaseButton>

第二种方法

Checkout shouldForwardProp

const Comp = styled('div').withConfig({
  shouldForwardProp: (prop, defaultValidatorFn) =>
      !['hidden'].includes(prop)
      && defaultValidatorFn(prop),
}).attrs({ className: 'foo' })`
  color: red;
  &.foo {
    text-decoration: underline;
  }
`;

render(
  <Comp hidden draggable="true">
    Drag Me!
  </Comp>
);

Answer 2

您现有的代码已经正确了，但是react给了您两个选择：

1）使用比蛇形字母小写的字母

2）从DOM中删除属性（您采用了这种方法）

从代码中我可以看到您需要道具jq '.. | objects | select(.read_only_allow_delete)'，但是在自定义样式中，您将道具分开了

{ "read_only_allow_delete": "false", "read_only": "false" } { "read_only_allow_delete": "true" } { "read_only_allow_delete": "true" } { "read_only_allow_delete": "true" } { "read_only_allow_delete": "true" } { "read_only_allow_delete": "false", "read_only": "false" } { "read_only_allow_delete": "false", "read_only": "false" } { "read_only_allow_delete": "true" } { "read_only_allow_delete": "false", "read_only": "false" }

您删除了边框Color道具，但尝试在样式道具中访问下一行。

如果您希望警告消失或只是忽略警告，请尝试将道具重命名为borderColor。

避免使用样式化组件和打字稿传递道具

2 个答案:

Use Transient props

第二种方法