Javascript 是否在高阶组件（HOC）中获取已包装组件的DOM节点？

在下面的示例中，如何从

MyComponent

内部

Enhance

获取渲染div的DOM节点

增强.js

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {
    return <ComposedComponent {...this.props} data={this.state.data} />;
  }
};

import { Enhance } from "./Enhance";

class MyComponent {
  render() {
    if (!this.data) return <div>Waiting...</div>;
    return <div>{this.data}</div>;
  }
}

export default Enhance(MyComponent); // Enhanced component

从“React”导入{Component}；
export var Enhance=ComposedComponent=>类扩展组件{
构造函数（）{
this.state={data:null}；
}
componentDidMount（）{
this.setState（{data:'Hello'}）；
}
render（）{
返回；
}
};

MyComponent.js

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {
    return <ComposedComponent {...this.props} data={this.state.data} />;
  }
};

import { Enhance } from "./Enhance";

class MyComponent {
  render() {
    if (!this.data) return <div>Waiting...</div>;
    return <div>{this.data}</div>;
  }
}

export default Enhance(MyComponent); // Enhanced component

从“/Enhance”导入{Enhance}；
类MyComponent{
render（）{
如果（！this.data）返回等待。。。；
返回{this.data}；
}
}
导出默认增强（MyComponent）；//增强组件

因为您的HOC直接呈现子组件，所以HOC中的

findDOMNode

返回的数据应该是子组件的DOM节点

export var Enhance = ComposedComponent => class extends Component {
    componentDidMount() {
        // Logs the DOM node returned by the wrapped component
        console.log( ReactDOM.findDOMNode( this.refs.child ) );
    }
    render() {
        return <ComposedComponent {...this.props} ref="child" />;
    }
};

export-var-Enhance=ComposedComponent=>类扩展组件{
componentDidMount（）{
//记录包装组件返回的DOM节点
log（ReactDOM.findDOMNode（this.refs.child））；
}
render（）{
返回；
}
};

findDOMNode

用法似乎不受欢迎（），

ref

字符串值我认为会贬值。您仍然可以使用

ref

并使用

ref

将您的

ComposedComponent

包装在

div

中，从而允许您访问节点

<div ref={ (elem) => { this.elem = elem; } }>
    <ComposedComponent { ...this.props }  />
</div>

{this.elem=elem；}}>

编辑

---

因为您使用的是React组件类，所以不需要包装器。如果它是一个功能组件，那么包装器就是。

高阶组件就是包装组件本身。。。增强。 获取包装组件的dom节点相当于获取hoc的dom节点

export var Enhance = ComposedComponent => class extends Component {
    componentDidMount() {
        // Logs the DOM node returned by the wrapped component
        console.log( ReactDOM.findDOMNode( this ) );
    }
    render() {
        return <ComposedComponent {...this.props}  />;
    }
};

export-var-Enhance=ComposedComponent=>类扩展组件{
componentDidMount（）{
//记录包装组件返回的DOM节点
log（ReactDOM.findDOMNode（this））；
}
render（）{
返回；
}
};

这样，我也可以使用forwardRef模式

export default WrappedComponent => {
  class EnhancedComponent extends React.Component {
    constructor(props) {
      super(props);
    }

    componentDidMount() {
      const domNode = ReactDOM.findDOMNode(this);
      console.log(domNode);
    }

    render() {
      const { forwardedRef, ...otherProps } = this.props;
      return <WrappedComponent ref={forwardedRef} {...otherProps} />;
    }
  }

  const forwardRef = (props, ref) => <EnhancedComponent {...props} forwardedRef={ref} />;
  return React.forwardRef(forwardRef);
};

导出默认WrappedComponent=>{
类EnhancedComponent扩展React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
const domNode=ReactDOM.findDOMNode（this）；
log（domNode）；
}
render（）{
const{forwardedRef，…otherProps}=this.props；
返回；
}
}
const forwardRef=（道具，ref）=>；
返回React.forwardRef（forwardRef）；
};