reactjs - 获取 ReactElement 的类实例

Question

我正在尝试获取 ReactElement 组件的实例。

我有以下（示例）代码：

import { Component, ReactElement } from "react";
import ReactDOM from "react-dom";

class Foo extends Component {
    public myAwesomeString = "meow";

    public myAwesomeFunction(echo: string) {
        console.log(echo);
    }

    public render() {
        return <span>Some content</span>;
    }
}

class Bar extends Component<{ children: ReactElement }> {
    public componentDidMount() {
        // this.props.children.myAwesomeFunction("meow") <-- How would I do this?
    }

    public render() {
        return (
            <>
                {this.props.children}
                <span>{/* this.props.children.myAwesomeString */}</span> {/* <-- And this?*/}
            </>
        );
    }
}

ReactDOM.render(
    <Bar>
        <Foo />
    </Bar>,
    document.getElementById("root")
);

有什么方法可以Foo从什么Bar时候获取实例？ 我试过使用，但我刚刚得到......有 什么想法吗？FooBar
this.props.children.refnull

Answer 1

您可以使用Context's 来注册子组件：

import { Component, ReactElement, createContext, ContextType } from "react";
import ReactDOM from "react-dom";

const RegisterContext = createContext({ register: (cp: Foo) => {} });

class Foo extends Component {
    public static contextType = RegisterContext;
    declare context: ContextType<typeof RegisterContext>;

    public componentDidMount() {
        this.context.register(this); // <--
    }

    public myAwesomeString = "meow";

    public myAwesomeFunction(echo: string) {
        console.log(echo);
    }

    public render() {
        return <span>Some content</span>;
    }
}

class Bar extends Component<{ children: ReactElement }> {
    private foo!: Foo;

    public componentDidMount() {
        this.foo.myAwesomeFunction("meow");
    }

    public registerFoo(foo: Foo) {
        this.foo = foo;
    }

    public render() {
        return (
            <>
                <RegisterContext.Provider
                    value={{ register: this.registerFoo }}>
                    {this.props.children}
                </RegisterContext.Provider>
                <span>{this.foo.myAwesomeString}</span>
            </>
        );
    }
}

ReactDOM.render(
    <Bar>
        <Foo />
    </Bar>,
    document.getElementById("root")
);

我还没有测试过这个具体的例子，但它看起来好像可以工作。