Reactjs 材料界面'；s withTheme（）对ref prop隐藏组件

对于React中很少需要引用另一个JSX元素的情况，可以使用

ref

prop，如下所示：

class Widget extends React.PureComponent {
  example() {
    // do something
  }
  render() {
...

<Widget ref={r => this.mywidget = r}/>
<OtherWidget onClick={e => this.mywidget.example()}/>

但是，如果完成此操作，

ref

将接收带有主题的

实例，而不是
小部件
。这意味着不再可以访问
example（）
函数

是否有某种方法可以将
ref
与
withTheme（）
包装的组件一起使用，以便仍然可以访问底层对象，就像没有使用
withTheme（）
一样

下面是一个例子来说明这个问题。可以对第27行和第28行进行注释/取消注释，以查看只有在添加
withTheme（）
调用时才会失败

为了获得使用withStyles包装的组件的ref，您可以在小部件周围创建一个包装器，并将其与
withStyles一起使用

const WithRefWidget = ({ innerRef, ...rest }) => {
  console.log(innerRef);
  return <Widget ref={innerRef} {...rest} />;
};
const MyWidget = withTheme()(WithRefWidget);

class Demo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.mywidget = null;
  }
  render() {
    return (
      <React.Fragment>
        <MyWidget
          innerRef={r => {
            console.log(r);
            this.mywidget = r;
          }}
        />
        <Button
          onClick={e => {
            e.preventDefault();
            console.log(this.mywidget);
          }}
          variant="raised"
        >
          Click
        </Button>
      </React.Fragment>
    );
  }
}

constwithrefwidget=（{innerRef，…rest}）=>{
console.log（innerRef）；
返回；
};
const MyWidget=withTheme（）（WithRefWidget）；
类Demo扩展了React.PureComponent{
建造师（道具）{
超级（道具）；
this.mywidget=null；
}
render（）{
返回(
{
控制台日志（r）；
this.mywidget=r；
}}
/>
{
e、 预防默认值（）；
log（this.mywidget）；
}}
variant=“提高”
>
点击
);
}
}

看看这个答案，看看其他的替代方法


根据Shubham Khatri的回答，这是一个较短的备选方案。当您不能修改内部组件时，这个答案就起作用了。当您可以修改内部组件时，这个示例稍微简短一些

本质上，
ref
不会通过
withTheme（）
传递，因此您必须使用具有不同名称的道具，并自己在其上实现
ref
功能：

class Widget extends React.PureComponent {
  constructor(props) {
    props.ref2(this); // duplicate 'ref' functionality for the 'ref2' prop
...
const MyWidget = withTheme()(Widget);
...
<MyWidget
  ref2={r => {
    console.log(r);
    this.mywidget = r;
  }}
/>

类小部件扩展了React.PureComponent{
建造师（道具）{
props.ref2（this）；//为'ref2'道具复制'ref'功能
...
const MyWidget=withTheme（）（小部件）；
...
{
控制台日志（r）；
this.mywidget=r；
}}
/>

class Widget extends React.PureComponent {
  constructor(props) {
    props.ref2(this); // duplicate 'ref' functionality for the 'ref2' prop
...
const MyWidget = withTheme()(Widget);
...
<MyWidget
  ref2={r => {
    console.log(r);
    this.mywidget = r;
  }}
/>