问题描述
我正在尝试获取 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
的孩子时,有没有办法从 Foo
获取实例 Bar
?
我曾尝试使用 this.props.children.ref
,但我刚刚得到 null
...
有什么想法吗?
解决方法
您可以使用 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")
);
我还没有测试过这个具体的例子,但看起来它可以工作。