获取更高级别组件（HOC）中包装组件的DOM节点？

问题描述：

在下面的示例中，我如何从MyComponent中获取Enhance中呈现的div的DOM节点？获取更高级别组件（HOC）中包装组件的DOM节点？

Enhance.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} />; 
    } 
};

MyComponent.js

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

答

因为您的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" />; 
    } 
};

答

findDOMNode使用时出现（https://github.com/yannickcr/eslint-plugin-react/issues/678#issue-165177220）被皱起了眉头，ref字符串值，我相信将会贬值。您仍然可以使用ref并用ref将ComposedComponent包装在div中，以允许您访问该节点。

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

编辑由于您使用的阵营组件类，你不需要包装。包装是如果它是一个功能组件。

获取更高级别组件（HOC）中包装组件的DOM节点？

相关推荐