Как заменить компоненты реакции другими компонентами реакции?

#javascript #reactjs #webpack #chakra-ui

Вопрос:

У меня есть что-то вроде этого

 <Box>
   <SomethingA>
</Box
 

Я хочу заменить Box.SomethingA на Box.SomethingB

 <Box>
   <SomethingB>
</Box>
 

Как я могу это сделать?

Комментарии:

1. Импортируйте что-нибудь и просто замените это в своем возвращении.

2. @Константин, но как что?

3. Вы хотите сделать это при определенном условии?

4. @AnkitGarg ну <SomethingA> , это карта мира в <svg> формате. И в этом <svg> есть <path> = Country своя . Так, например, когда пользователь нажимает на <path> то, у которого есть имя USA , то <SomethingA> изменится на <SomethingB то, которое равно другому <svg> , у которого есть карта США

5. Попробуйте перейти по ссылке ниже. Это поможет вам в достижении упомянутого вами сценария. reactjs.org/docs/conditional-rendering.html

Ответ №1:

Я предполагаю, что вы хотите заменить его после того, как произошло событие, например: button click . Вы можете попробовать это:

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

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

Комментарии:

1. ну, я хочу сначала <SomethingA/> сделать рендеринг, а затем заменить его каким-нибудь условием <SomethingA/> <SomethingB/> . Но спасибо тебе

2. да, я понял, но вы не упомянули condition , что это вызовет замену, однако, в основном вы этого добиваетесь. Если вы сочтете мой ответ полезным, пожалуйста, проголосуйте за него.