reactjs - 获取 ReactElement 的类实例
问题描述
我正在尝试获取 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
'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")
);
我还没有测试过这个具体的例子,但它看起来好像可以工作。
推荐阅读
- react-native - 我如何使 TextInput 在 react native 提交后清除
- java - ComponentScan 忽略 excludeFilters(在测试中)
- python - 如何确定语料库中的哪些文本包含由 Python 中的 NLTK 套件生成的错误?
- ios - 在 Swift 中创建 JSON 参数
- node.js - 以不寻常的方式使用 module.exports
- docker - 在 docker-compose 中使用两个主机 IP
- javascript - MSSQL Server 到 PHP 数组到 JSON 编码到 Highcharts
- client - Lazarus json-rpc 客户端
- excel - 从 CSV 文件导入数据错误:名称为 ... 的查询已存在
- python - AttributeError:“模块”对象没有属性“getlogger”