样式化组件：尝试传递引用时找不到名称'ref'

Question

我正试图在emotion组件内部传递一个要读取的ref(类似于styled-components)

但收到错误Cannot find name 'ref'

我应该怎么做才能访问情绪成分中的裁判？

const Label = styled('p')<{ ref: React.MutableRefObject<null> }>({
fontsize: ref.current...,
});
export const NodeDisplayer = ({ data }) => {
const size = useRef(null);
return (
<>
<Label  ref={size} id="title">

</Label>
</>

Answer 1

您无法获得对组件函数的引用，因为它不存在于DOM中。您需要引用HTML元素，也可以在子元素中引用。由于在组件渲染后才会填充ref，因此需要使用useEffect来获取引用的节点。

function Label() {
const ref = useRef<HTMLParagraphElement>(null);
const [style, setStyle] = useState<CSSProperties>({});
useEffect(() => setStyle({ fontSize: ref.current.clientWidth + 'px' }), []);
return (
<p ref={ref} style={style}>
Hi
</p>
);
}
export const NodeDisplayer = () => <Label></Label>

Answer 2

你想做什么？为什么组件需要访问自己的DOM节点来确定其样式？我怀疑它能否正常工作。

但为了回答你的问题，ref道具在React中是特殊的，所以在道具中无法访问，但没有什么可以阻止你将其添加为不同的道具：

<Label ref={size} myRef={size} id="title">

然后您应该能够访问myRef。