Question

我的反应类很少，我应该转发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>;
    }
}

问题：如何在不烦人的财产声明的情况下使用转发？并且不将App ref存储为全局上下文变量（(ref) => window.app = ref）。我需要像依赖注入或createComponentFactory（我可以手动添加所需的道具）或生命周期钩子的东西？互联网告诉刚开始的反应......

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类

后的任何其他位置访问该实例

所以在MySimpleClass，MyAnotherClass，AndAnotherClass你可以这样做

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

反应转发应用程序组件

1 个答案: