如何用另一个 React 组件替换一个 React 组件？答案

【问题标题】：How to replace a React Components with another React Components?如何用另一个 React 组件替换一个 React 组件？
【发布时间】：2021-05-27 08:26:03
【问题描述】：

我得到了这样的东西

<Box>
   <SomethingA>
</Box

我想将Box.SomethingA 替换为Box.SomethingB

<Box>
   <SomethingB>
</Box>

我该怎么做？

【问题讨论】：

导入 SomethingB 并在退货时替换它。
@Konstantin 但喜欢什么？
你想在特定条件下这样做吗？
@AnkitGarg <SomethingA> 是<svg> 格式的世界地图。其中<svg> 有一个<path> = Country。因此，例如，当用户单击名称为 USA 的 <path> 时，<SomethingA> 将更改为 <SomethingB，这等于另一个具有 美国地图的 <svg> >
试试下面的链接。这将帮助您实现您提到的场景。 reactjs.org/docs/conditional-rendering.html

标签： javascript reactjs webpack chakra-ui

【解决方案1】：

我猜你想在事件发生后替换它，例如：button click。你可以试试这个：

function App(){
  const [box, changeBox] = useState(true)

  return(
    <div>
      <button onClick={()=>{changeBox(!box)}} >Click</button>
      <Box>
        { box ? <SomethingA/> : <SomethingB/>}
      </Box>
    </div>
  )
}

【讨论】：

好吧，我想先渲染<SomethingA/>，然后在某些条件下将<SomethingA/> 替换为<SomethingB/>。但是谢谢你
是的，我想，但你没有提到你的condition 会触发替换，但是，这基本上是你实现的。如果您觉得我的回答有帮助，请投票。