Question

我正在尝试渲染一个有两个孩子的父组件。子代的渲染将切换，因此一次将仅渲染第一个子代，另一次将是最后一个子代，最后将切换回第一个子代（然后应包含之前显示的所有值）。我以为这很简单，但事实并非如此。

现在出现问题：每当调用switchContainer方法时，它将切换容器并渲染另一个。但是，所有成员变量，道具和状态都已丢失，并且基本上从零开始重新确定了子组件。

是否有一种方法可以按原样保存子组件，并且一旦重新渲染子组件，它将再次保留所有成员变量，道具和状态？

我知道您可以向以下元素发送道具和状态：

<Child props={<data>} states={<data>}>

但这不能解决缺少成员变量的问题，我认为这不是一个平滑的解决方案。

到目前为止，我的尝试是（这只是一个模型）：

class Parent extends React.Component<any,any> {
  private firstContainer:any;
  private secondContainer:any;
  private currentContainer:any;
  constructor(props:any) {
        super(props);
        this.firstContainer = <Child>;
        this.secondContainer = <Child>;
    }
    public render() {
        return (
            <div>
                {this.currentContainer}
            </div>
        );
    }
    public switchContainer() {
        if(this.currentContainer === this.firstContainer) {
            this.currentContainer = this.secondContainer;
        }
        else {
            this.currentContainer = this.firstContainer;
        }
        this.forceUpdate();
    }
}


class Child extends React.Component<any,any> {
    private anyValue:string;
    constructor(props) {
        this.change = this.change.bind(this);
    }
    public render() {
        return (
            <input onChange={this.change} value={this.anyValue}/>
        );
    }
    private change(e:any) {
        this.anyValue = e.target.value;
    }
}

Answer 1

您可以尝试维护状态并在render中更新子级，而不是将子级另存为firstContainer和secondContainer

class Parent extends React.Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            firstChild: true
        };
    }

    public render() {
        const { firstChild } = this.state;
        <div>
            <Child1 show={firstChild}/>
            <Child2 show={!firstChild} />
        </div>
    }

    public switchContainer() {
        this.setState(({ firstChild }) => ({ firstChild: !firstChild }));
    };
}

然后在子组件中，将show处理为showContent，否则渲染null。如果要保留状态，则不应卸载组件。

由ref

1 个答案: