Question

父类有几个子组件，所有子组件都在render方法中实例化，因此对父状态的任何更改都会导致所有子组件被重新实例化，每次调用render时都会创建子组件的新实例，从而失去状态为了重用子实例，我尝试使用parent.refs.childRef检索子实例，但是这给了我错误

未捕获错误：对象无效作为React子级

，这是我的代码

placeHolderComponent(){
        let component;
        let palceHolderValue=this.state.uiState.placeHolder;
        let classInstance=this;
        if(palceHolderValue=='empty'){
            component=<EmptyComponent></EmptyComponent>
        }
        else if(palceHolderValue=='search'){
                component= classInstance.refs.gpSearchComponent!=null?  classInstance.refs.gpSearchComponent:    <GpSearch  ref="gpSearchComponent"/>
        }
        return component;
    }

此处GpSearch Component使用ref属性进行实例化，并且代码检查parent.refs.childComponentRefId是否为null然后呈现该实例，而不是新实例。我收到此错误

未捕获错误：对象作为React子对象无效（....如果你意味着渲染子集合，使用数组或换行来自React附加组件
的createFragment（object）对象

Answer 1

＆＃34;对父状态的任何更改都将导致所有子项重新实例化＆＃34;

不，对父状态的任何更改都可能导致父级及其子级的重新呈现。子组件未重新创建，但重新呈现（尽管您可以避免使用生命周期挂钩shouldComponentUpdate重新呈现子项。）

＆＃34;失去孩子的状态＆＃34;

再次请注意，儿童在重新渲染时不会失去内部状态。

错误可能是由这一行抛出的：

 component = classInstance.refs.gpSearchComponent != null ?  classInstance.refs.gpSearchComponent: <GpSearch  ref="gpSearchComponent"/>

因为classInstance.refs.gpSearchComponent是一个对象而且React抱怨＆＃34;未捕获错误：对象无效作为React子＆＃34;。

    if(palceHolderValue=='empty'){
        component=<EmptyComponent></EmptyComponent>
    }
    else if(palceHolderValue=='search'){
            component= classInstance.refs.gpSearchComponent!=null?  classInstance.refs.gpSearchComponent:    <GpSearch  ref="gpSearchComponent"/>
    }
    return component;

根据^^此代码，我认为您要么渲染EmptyComponent或GpSearch组件。因此，每当placeHolderValue更改时，您都会卸载当前重新渲染的组件。这就是每次重新实例化组件的方式，从而丢失子组件的内部状态。

另一种方法是，将孩子的状态保存在父母中（作为父组件的状态），并根据需要将其作为道具传递给孩子。

在反应渲染中重用组件实例

1 个答案: