ReactJS按ref呈现元素

我试图渲染一个有两个子组件的父组件。子对象的渲染将切换，因此一次将只渲染第一个子对象，另一次将是最后一个子对象，最后将切换回第一个子对象（该子对象应包含前面显示的所有值）。 我原以为这很简单，但事实并非如此

现在来看问题：无论何时调用方法switchContainer，它都会切换容器并呈现另一个。然而，所有成员变量、道具和状态都丢失了，它基本上从头开始重新关联子组件

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

我知道你可以像这样向元素发送道具和状态：

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

但这并不能解决缺少成员变量的问题，在我看来，这不是一个顺利的解决方案

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

类父级扩展React.Component{
私人集装箱：任何；
私人第二容器：任何；
私有容器：任何；
构造器（道具：任何）{
超级（道具）；
this.firstContainer=；
this.secondContainer=；
}
公共渲染（）{
返回(
{this.currentContainer}
);
}
公共交换容器（）{
if（this.currentContainer==this.firstContainer）{
this.currentContainer=this.secondContainer；
}
否则{
this.currentContainer=this.firstContainer；
}
这个.forceUpdate（）；
}
}
子类扩展了React.Component{
私有值：字符串；
建造师（道具）{
this.change=this.change.bind（this）；
}
公共渲染（）{
返回(
);
}
私人变更（e：任何）{
this.anyValue=e.target.value；
}
}

您可以尝试在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 }));
    };
}

类父级扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
第一个孩子：是的
};
}
公共渲染（）{
const{firstChild}=this.state；
}
公共交换容器（）{
this.setState（（{firstChild}）=>（{firstChild:！firstChild}））；
};
}

---

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

感谢您的快速回答，不幸的是，这是不可能的，因为子组件可以“动态”添加，并且从一开始就不知道。因此，一旦附加了一个新的子组件，父组件将始终必须重新命名子组件。在您的示例中，每当“firstChild”发生更改时，子元素都会重新引发，因此成员变量“anyValue”再次丢失。您可以将any值作为状态存储在父组件中。

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 }));
    };
}