反应转发应用程序组件

Question

我有很少的react类，我应该转发app ref：

class App extends React.Component {
    /** @public */
    testCase = "Woooa dis is test!";
    render() {
        return <MySimpleClass application={this}/>;
    }
}
class MySimpleClass extends React.Component {
    render() {
        return <MyAnotherClass application={this.props.application}/>;
    }
}
class MyAnotherClass extends React.Component {
    render() {
        return <AndAnotherClass application={this.props.application}/>;
    }
}
class AndAnotherClass extends React.Component {
    render() {
        return <div>{this.props.application.testCase}</div>;
    }
}

问题：我如何使用转发而无需烦恼的属性声明？而无需存储应用程序参考作为全局上下文变量((ref) => window.app = ref(。我需要依赖性注入或createComponentFactory(可以手动添加所需的道具(或生命周期挂钩之类的东西？Internet告诉人数几乎是对临时反应的人...

Answer 1

您可以做诸如singleton模式

之类的事情

class App extends React.Component {
    static instance = null;
    constructor(props) {
        super(props);
        if (App.instance == null)
            App.instance = this;
    }

    testCase = "Woooa dis is test!";
    render() {
        return <MySimpleClass/>;
    }
}

现在，您可以在启动App class

之后访问实例的任何地方

so在MySimpleClass中，MyAnotherClass，AndAnotherClass您可以执行此操作

render(){
    let app = App.instance;
}