通过多个组件转发引用

Question

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

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

我已经非常依赖于按钮风格的动态CSS，这就是为什么我不能只使用常规的CSS样式表并直接访问MUI的Button ，像：

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

Styled-components有一个innerRef prop ...

<NavButtonMain innerRef={ref}/>

..但我不知道怎么把它从那里再下一层进入Button。有什么想法吗？

Answer 1

您可以简单地将道具buttonRef传递到NavButtonMain，访问并在Button组件中使用

<NavButtonMain buttonRef={ref}/>

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

Answer 2

如果有人最近正在寻找解决方案-最新文档解释了material-ui在幕后转发ref属性，因此这绝对足够：

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