如何消除错误函数组件不能给出refs.尝试访问此ref将失败.你的意思是使用React.forwardRef()吗?&l

Question

我用"style "从材质UI到样式化组件。现在，我正在清除控制台错误中的代码。

一开始，我有这样的事情:警告:React不能识别DOM元素上的constantColors属性。如果您有意让它作为自定义属性出现在DOM中，请将其拼写为小写的constantcolors。如果你不小心从父组件传递了它，请从DOM元素中删除它。

例如，问题是在传递所有的道具到DOM子元素(已知的问题?)因此，这段代码:

export const StyledAddCircleOutlined = styled(AddCircleOutline)(
({ theme, constantColors = false }) => css`
color: ${constantColors ? theme.palette.success.main : 'none'};
transition: all 1s ease;
cursor: pointer;
:hover {
color: ${constantColors ? 'none' : theme.palette.success.main};
opacity: ${constantColors ? 0.6 : 'none'};
}
:active {
color: ${theme.palette.success.light};
transition: all 5ms ease;
}
`
)

被我重构成这样:

export const StyledAddCircleOutlined = styled(
({ theme, constantColors = false, ...rest }) => <AddCircleOutline {...rest} />
)(
({ theme, constantColors = false }) => css`
color: ${constantColors ? theme.palette.success.main : 'none'};
transition: all 1s ease;
cursor: pointer; 

(…)

在大多数情况下，这适用于其他组件…但这次不是这样。这一次，我只是有一个新的错误:)

"警告:不能给函数组件赋值。尝试访问此ref将失败。你的意思是使用React.forwardRef()吗?检查Styled(Component)">

的渲染方法怎么回事?通常这样的重构是有效的，它甚至不是一个复杂的函数，它只是一个来自material-ui库的图标:P

如何解决这个问题?我没有给任何裁判，我不知道我是否应该?

在DOM结构中是这样的:

{index === 0 && !isMobileDevice && (
<StyledAddCircleOutlined
onClick={() => handleAddField(name, field.value)}
constantColors
/>
)}

Answer 1

当使用有样式的组件时，ref(和更多)props是默认传递的。在您的情况下，当您添加...rest时，您传递的道具比您可以看到的要多(打印它并查看控制台)。

就像这样去掉ref:export const StyledAddCircleOutlined = styled( ({ theme, constantColors = false, ref, ...rest }) => <AddCircleOutline {...rest} />,

如果这不能解决你的问题，用forwardRef包装你的组件，并提取它作为ref