通过多个组件转发 refs答案

【问题标题】：Forwarding refs through multiple components通过多个组件转发 refs
【发布时间】：2018-11-24 22:31:45
【问题描述】：

我正在为应用程序使用 Material-UI 和 styled-components，并且我正在尝试将 ref 向下传递到由 MUI 创建的根 <button> 节点。 MUI 有一个 buttonRef 属性来访问它，所以这很简单，但是我使用 styled-components 来设置 MUI 的 Button 组件的样式，如下所示：

const NavButtonMain = styled(Button)`
    ...
`

我也已经在该按钮的样式中非常依赖动态 CSS，这就是为什么我不能只使用常规 CSS 样式表并直接访问 MUI 的按钮，例如：

<Button buttonRef={ref} className={plain-old-css}/>

Styled-components 有一个 innerRef 属性...

<NavButtonMain innerRef={ref}/>

..但我不知道如何从那里再往下一层进入按钮。有什么想法吗？

【问题讨论】：

标签： css reactjs material-ui styled-components react-ref

【解决方案1】：

你可以简单地将prop作为buttonRef传递给NavButtonMain，在Button组件中访问和使用它

<NavButtonMain buttonRef={ref}/>

<Button buttonRef={this.props.buttonRef} className={plain-old-css}/>

【讨论】：

谢谢，但是通过这样的 prop 传递 ref 会使 React 崩溃。我想我已经设法通过使用 React.forwardRef 让它部分工作，但我还不完全确定如何。如果我弄清楚了，我会发布代码。
@MatthewMasurka 你有想过吗？我还需要将引用从一个组件转发到另一个组件/纯组件，我不能在这个组件上使用功能性无状态组件...

【解决方案2】：

如果最近有人在寻找解决方案 - 最新文档解释说 material-ui 在引擎盖下转发 ref 属性，所以这绝对足够了：

const myRef = useRef();
...
return <Button ref={ref} {...props} />

【讨论】：