Question

我有几个React组件都基于同一个基类，这些组件具有一些属性，在渲染该组件之前，我想阅读这些属性。这与其他地方使用的某些条件有关。

当前，我正在使用Render函数中的方法来调用方法。

public getWidget(): JSX.Element {

    let widget = null;
    switch (widgetType) {
        case 'widget1': {
            widgetComponent = new Widget1(props); // private variable in my class
            widget = (<Widget1 { ...props } ref = { some-ref });
        }
        case 'widget2': {
            widgetComponent = new Widget2(props); // private variable in my class
            widget = (<Widget2 { ...props } ref = { some-ref });
        }
    }
    return widget;
}

这样，我可以向小部件询问一些有关其默认值的信息，并在我的widget函数中呈现Render变量，如下所示：

render() {
    const widget = this.getWidget();

    const somethingIWantToKnow = this.widgetComponent.someProperty;

    return ({ widget });
}

据我了解，我为React Component设置的引用仅在渲染后才可用？否则，我只能使用它。

我也尝试用自己的this.widgetComponent.render()方法调用Render，但这不能正确设置组件（可能是因为缺少了componentWillMount和componentDidMount调用。 / p>

我简直不敢相信这是要走的路，有没有办法在我的this.widgetComponent方法中从Render进行渲染，还是有办法从类后面获取属性？ JSX.Element？

NULL检查和其他内容已从这些代码段中删除：）

Answer 1

为小部件提供参考

widget = (<Widget1 { ...props } ref = { widget1 } />);

然后，您可以在componentDidMount中访问实例化的组件，并使用ref来访问属性，

componentDidMount(){
    const somethingIWantToKnow  = this.widget1.current.someProperty
}

从实例化的React.Component渲染React组件

1 个答案: