forwardRef如何在两个Component组件用？

Question

子组件

class ChildComponent extends React.Component {

    logc = () => {
        console.log('---child---')
    }

    render() {
        return <div>ChildComponent</div>
    }
}

export default ChildComponent

父组件

class ParentComponent extends React.Component {

    constructor(props) {
        super(props);
        console.log('p-custructor', props);
    }

    logp = () => {
        console.log('---parent---')
    }

    render() {
        return <div>ParentComponent<ChildComponent ref={this.props.ref} /></div>
    }
}

export default React.forwardRef((props, ref) => (<ParentComponent ref={ref} />));

页面

class Demo extends React.Component {
    parentRef: React.RefObject<any>;

    constructor(props: any) {
        super(props);
        this.parentRef = React.createRef();
    }

    handleClick = () => {
        console.log('this.parentRef', this.parentRef);
    }

    render() {
        return (
            <div className={styles.container}>
                <Button type="primary" onClick={this.handleClick}>click</Button>
                <ParentComponent ref={this.parentRef} />
            </div>
        );
    }
}

handleClick中的parentRef还是父组件的实例，如何在页面中拿到子组件的Ref???

Answer 1

forwardRef 需要在子组件再包一层