Как отобразить строку как пользовательский компонент React?

Question

Итак, у меня есть этот код

ReactDom.render(<Home />, document.getElementById("main"));

Это прекрасно работает и отображает компонент Home. Я хочу сделать этот код динамическим c вместо компонента Home, это может быть любой компонент, например компонент "Квартира" или "Здание".

Я попытался сделать это с помощью следующего кода.

const tag = `<${main} />`;
ReactDom.render(tag, document.getElementById("main"));

Это не работает.

Я хотел бы знать, возможно ли это. Я бы предпочел сделать это без какой-либо сторонней библиотеки.

Answer 1

То, что я хотел бы сделать, как уже упоминалось в разделе комментариев, - это сначала создать компонент <App /> и обработать его, который будет отображаться на вашем экране. Это не отобразит все компоненты, как вы могли бы ожидать на основе вашего комментария.

Например, в компоненте <App />, основанном на значении string, вы можете отобразить различные компоненты. Этим значением string можно манипулировать с помощью обработчиков button компонентов onClick, что я оставлю вам, как иметь дело.

Основной компонент <App /> будет выглядеть так:

import React, { useState } from 'react';
// import other components

function App() {
   const [current, setCurrent] = useState('home');

   if (current === 'home') { return <Home /> }
   else if (current === 'contact') { return <Contact /> }
   else { return <DifferentComponent /> }
}

export default App;

Индекс . js будет выглядеть следующим образом:

ReactDOM.render(<App />, document.getElementById('root'));

В конце вы можете создать различные кнопки в вашем return, куда вы можете позвонить setCurrent для того, чтобы манипулировать, какой из них визуализировать.

Или, как я предложил в комментариях, как второй вариант, вы можете go с реагировать на маршрутизатор , это поможет вам для визуализации различных компонентов на основе текущего маршрута. Посмотрите на это хорошее быстрое обучение , если вы хотите этого достичь.

Надеюсь, это объяснение поможет!

Answer 2

Вы можете создать компонент для рендеринга каждого передаваемого вами имени, установленного в состоянии. Это будет отображать все компоненты, как вы могли ожидать, основываясь на ваших реквизитах.

Например, вы можете написать этот компонент: Render. js

import React, { useState } from 'react';
// import other components

export default (props) => {
  const [current, setCurrent] = useState('home');
  const App= {
    home: Home,
    apartment: Apartment ,
    building: Building,
    ...
  };

  let Render = App[current] || Home;

  return <Render {...props}   />;
};

Индекс. js будет выглядеть следующим образом:

ReactDOM.render(<Render/>, document.getElementById('root'));