reactjs - 如何将组件的 ref 降低 3 个级别？

Question

我和 一起工作<canvas>，这就是我需要它的原因，我知道它通常有气味，但不是这种情况。

我有组件树：

<A>
  <B>
    <C>
     <D/>
    </C>
  </B>
</A>

只有这个被分成组件。

如何<D>在组件中获取组件的引用<A>？

就像是：

// i use class components, it just for example
class A extends React.Component {
  refD = React.createRef<D>();

  componentDidMount() { 
    // do something with refD
  }

  render() { return <B innerRef={innerRef} />; }
}

const B = ({ innerRef }) => <C innerRef={innerRef} />;
const C = ({ innerRef }) => <D ref={innerRef} />;
const D = () => <div>yep, i'm just div</div>;

我用过forwardRef，但它只工作一个级别

Answer 1

您可以将 A 中的语句移动componentDidMount到一个函数中，并将其作为 props 传递给 D。在 DOM 更改后，您可以从 D 调用此函数componentDidMount

class A extends React.Component {
    constructor(props) {
        super(props)
    }

    dMounted(ref) {
        // do something with D's ref
    }

    render() {
        return(
            <B  dMounted={this.dMounted}/>
        )
    }
}

const B = (props) => <C {...props}/>
const C = (props) => <D {...props}/>

class D extends React.Component {
    constructor(props) {
        super(props)
        this.ref = React.createRef()
    }

    componentDidMount() {
        this.props.dMounted(this.ref)
    }

    render() {
        return(
            <div ref={this.ref}>yep, i'm just div</div>
        )
    }
}