ReactJS 通过 ref 渲染元素

Question

我正在尝试渲染一个有两个子组件的父组件。 child 的渲染会切换，所以一次只会渲染第一个 child ，另一次会是最后一个，最后会切换回第一个 child (然后应该包含之前显示的所有值)。我以为这会很简单，但事实证明并非如此。

现在问题来了:每当调用 switchContainer 方法时，它都会切换容器并渲染另一个容器。然而，所有成员变量、 Prop 和状态都丢失了，它基本上是从头开始重新实例化子组件。

有没有办法“按原样”保存子组件，一旦重新渲染，它将再次保存所有成员变量、 Prop 和状态？

我知道您可以像这样向元素发送 Prop 和状态:

<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

您可以尝试在渲染中维护一个状态并更新子项，而不是将子项保存为 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。如果要保留状态，则不应卸载组件。