Javascript 如何在不卸载组件的情况下在react中呈现组件数组？

我有一组React组件，它们从映射函数接收道具，但问题是在任何状态更新时都会安装和卸载这些组件。这不是数组键的问题。 请参阅代码沙盒链接

const示例=（）=>{
常数分量=[
（道具：任何）=>(
),
（道具：任何）=>(
),
];
返回(
{components.map（（Comp，index）=>{
const isActive=index==currentIndex；
返回；
})}
)
}

如果我在

组件.map

之外渲染它们（如下所示），那么组件在任何状态更改时都会保持不变

<Comp1 isActive={x === y}
<Comp2 isActive={x === y}

---

我认为有两个问题：

要使React有效地重用它们，您需要向它们添加：

然后在
地图中
：

{components.map(({Comp, props}, index) => {
    const isActive = index === currentIndex;
    return <Comp key={index} isActive={isActive} {...props} />;
})}

.active{
光标：指针；
}

您应该查看React中的属性。它有助于识别哪些项目已更改、已添加或已删除。应为数组内的元素提供键，以使元素具有稳定的标识
向我的数组添加了一个
键
值，但仍然存在相同的问题，即组件正在卸载和重新渲染。我已使用codesandbox更新了我的问题，我把我的问题缩小了一点better@KarlTaylor-我认为问题在于，如果
example
位于组件内部，则每次都在重新创建函数。（我在尝试为您做一个可运行的示例时犯了同样的错误。）我将更新答案以说明如何避免这种情况。@KarlTaylor-我现在已经更新了答案。您只需更改
键
。如果
key
更改，它将被重新引用。对于可运行的示例，请使用堆栈片段，而不是场外资源。堆栈代码段支持React，包括JSX。我忘了在上面的评论中包括“为什么”：-）三个原因：人们不应该离开现场去帮助你；一些网站被一些用户屏蔽；链接腐烂，使问题及其答案对未来的人们毫无用处。更多：
const components = [
    {
        Comp: LandingFirstStep,
        props: {
            // Any props for this component other than `isActive`...
            onClick: progressToNextIndex
        }
    },
    {
        Comp: CameraOnboarding,
        props: {
            // Any props for this component other than `isActive`...
            onNextClick: progressToNextIndex
        }
    },
];

{components.map(({Comp, props}, index) => {
    const isActive = index === currentIndex;
    return <Comp key={index} isActive={isActive} {...props} />;
})}