情感风格的组件和 React.forwardRef 不能一起工作

Posted 2023-03-15

【中文标题】情感风格的组件和 React.forwardRef 不能一起工作

【英文标题】：Emotion styled component and React.forwardRef not working together

【发布时间】：2019-08-16 00:35:17

【问题描述】：

我正在尝试编写两个 React 样式的组件（使用 Emotion 10），在其中一个中指定一些自定义渲染逻辑，并保留检索它们“refs”的能力。

这是我的代码：

const Foo = styled(props => <div ...props />)`
  color: red;
`;

// Here I **want** to use the component selector
// https://emotion.sh/docs/styled#targeting-another-emotion-component
const Bar = styled.div`
  $Foo 
    background-color: yellow;
  
`;

const App = () => 
  const ref = React.useRef();
  return <Bar><Foo ref=ref>foo</Foo></Bar>;
;

ReactDOM.render(<App />, document.body);

这段代码的问题是 React 抛出了这个警告：

警告：函数组件不能被赋予 refs。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？

正如我们所知，Emotion 风格的组件利用React.forwardRef 使开发人员能够在其上使用ref 属性。但是一旦切换到自定义渲染方法，它似乎就不起作用了。

然后，如果我（尴尬地^[1]）将其转换为使用React.forwardRef，我得到的是：

const Foo = React.forwardRef((props, ref) => 
  const Component = styled(props => <div ...props />)`
    color: red;
  `;
  return <Component ...props ref=ref />;
);

const Bar = styled.div`
  $Foo 
    background-color: yellow;
  
`;

const App = () => 
  const ref = React.useRef();
  return <Bar><Foo ref=ref>foo</Foo></Bar>;
;

ReactDOM.render(<App />, document.body);

然后，我得到一个不同的错误：

TypeError：无法将符号值转换为字符串

在我尝试使用$Foo 的地方发生了这种情况。可能是因为 Emotion 需要一个样式化的组件，但我现在提供了一个 forwardRef 组件。

这是一个 CodeSandbox，可以让我更轻松地使用我的代码：https://codesandbox.io/s/7ylnlovlz6

那么，实现我想要的目标的正确方法是什么？

[1]：我知道在渲染中定义组件会使组件在每次渲染时重新渲染，但在这种情况下无关紧要。

【问题讨论】：

你试过用 React.frowardRef 包装你的组件吗？

你能把它扔进在线REPL吗？会更容易提供帮助。

我只是想把 Emotion + Pose + Typescript 结合起来，有类似的问题，现在设法解决了:)

您遇到了一些问题 - codesandbox.io/s/p7ky3w4y47?fontsize=14 这就是您的目标吗？

在这种情况下，它们会给出相同的结果，是的，似乎存在问题，因为它可以使用对象表示法。

【参考方案1】：

现在您无需执行任何操作。情绪处理正确。 此代码将起作用。

const Foo = styled(props => <div ...props />)`
  color: red;
`;

const Bar = styled.div`
  $Foo 
    background-color: yellow;
  
`;

const App = () => 
  const ref = React.useRef();
  return <Bar><Foo ref=ref>foo</Foo></Bar>;
;

ReactDOM.render(<App />, document.body);

【讨论】：

“现在”？这是否在特定版本中得到修复？