获取 ReactElement 的类实例答案

【问题标题】：Get class instance of ReactElement获取 ReactElement 的类实例
【发布时间】：2021-08-26 21:20:23
【问题描述】：

我正在尝试获取 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 的孩子时，有什么方法可以从Bar 获取实例Foo？
我尝试过使用this.props.children.ref，但我刚得到null...
有什么想法吗？

【问题讨论】：

您的意思是从Foo 组件中，您希望能够判断它的父组件是否为Bar？
不，正好相反，从Bar 获取Foo 实例
你不能，也不应该！尝试找到另一种方法来解决您的问题！你真正想做什么？
是的，这看起来很奇怪。或许可以解释一下您想要完成的工作以及原因，我们可以提出建议。
我正在尝试做类似于this 的事情，但是slot 需要获取子实例

标签： reactjs typescript tsx

【解决方案1】：

您可以使用Context的注册子组件：

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")
);

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

【讨论】：