React 中无法识别样式化组件

Question

我有以下样式组件（未完整发布，没有任何区别）： 它从

Handle

库

 扩展了 

HandleProps

（和 

'reactflow'

）

interface CustomHandleProps extends HandleProps {
  istarget?: boolean;
  zoomedout?: boolean;
  placement: number;
  placementOffset: string;
  nodeSize: string;
  titleMaxLength?: 1 | 2;
  showTitle?: string;
  customTitle?: PointTitleCustomization;
  format?: PointFormat;
}

export const CustomHandle = styled(Handle).attrs(({ type }) => ({ type }))<CustomHandleProps>`
  width: ${({ nodeSize }) => nodeSize};
  height: ${({ nodeSize }) => nodeSize};
  border-radius: ${({ format }) => (format ? (format === 'circle' ? '50%' : '0') : '50%')};
  display: flex;
  border: ${({ zoomedout }) => (!zoomedout ? ' 1px solid #fff' : 'none')};
...
`

它的用法如下：

import * as Styled from './diagram-card-edge.styles';
<Styled.CustomHandle
  key={`${edgePosition}-${type}-${index}-${nodeData.id}`}
  id={`${edgePosition}-${type}-${index}-${nodeData.id}`}
  position={position}
  istarget={isTarget}
  type={type}
  zoomedout={zoomedOut}
  isConnectable={!zoomedOut}
  placement={calcEdgePlacement(
    index,
    nodeData.edges[edgePosition]?.nodes as number,
    nodeData.edges[edgePosition]?.alignOffset,
    nodeData.edges[edgePosition]?.align
  )}
  isConnectableStart={!nodeData.lockDiagram}
  placementOffset="-0.3rem"
  nodeSize="0.5rem"
/>;

但是 React 似乎没有将其识别为样式组件，出现如下错误：

警告：React 无法识别 DOM 上的

nodeSize

属性 元素。如果你故意希望它作为自定义出现在 DOM 中 属性，请将其拼写为小写

nodesize

。如果你 不小心从父组件传递了它，将其从 DOM 中删除 元素。 或者 警告：React 无法识别 DOM 上的

placementOffset

属性 元素。如果你故意希望它作为自定义出现在 DOM 中 属性，请将其拼写为小写

placementoffset

。如果你 不小心从父组件传递了它，将其从 DOM 中删除 元素。

或

警告：收到非布尔属性

false

zoomedout

。

如果你想将其写入 DOM，请传递一个字符串： Zoomedout="false" 或 Zoomedout={value.toString()}.

如果您曾经使用 Zoomedout={condition && 有条件地忽略它 值}，传递zoomedout={条件？值：未定义} 相反。

属性的值在组件中正确传递，我检查了日志。 我尝试做一些修改，例如 styled-component .attrs - React does not recognize prop 中的修改，但似乎都不起作用。

反应版本：17.0.2 样式组件版本：5.3.5

Answer 1

您可以通过在道具名称中添加美元符号 (

styled-components

) 前缀来使用 $

瞬态道具

：

<Styled.CustomHandle
  $nodeSize="0.5rem"
/>

这可以让你跳过某些要传递的道具。

Answer 2

所以，这里有两个问题： 首先也是最重要的，它缺少 Reactflow 样式的主要导入，这破坏了代码中的很多内容

import 'reactflow/dist/style.css';

其次，当需要传递更多的props并让它们被识别时，需要使用withConfig和shouldForwardProp 所以问题中的例子就变成了：

export const CustomHandle = styled(Handle).withConfig({
    shouldForwardProp: (prop) =>
        !['istarget', 'zoomedout', 'cardEdgeHandlePositionOffset', 'cardEdgeHandleDimensions'].includes(prop)
})<CustomHandleProps>`
...

这就是我如何设法修复 props 的警告和自定义 Reactflow 组件的样式。

Answer 3

几天前我遇到了同样的问题，我在here

发布了我的解决方案

样式化组件迁移指南 v6

希望有帮助！

问候