React, как создать компонент из строки?

Question

[Wan-Derer]

Всем привет!
У меня в заготовке компонента есть стока:
const content = '<div><h1>OLOLO</h1></div>';
Что надо написать в return чтобы она была воспринята как JSX и отрендерена?

Смысл вопроса: мне надо создавать компонент динамически, допустим, мне с бэка прилетает JSON с описанием как должен выглядеть компонент, я его строю и скармливаю Реакту. Пока придумалось строить строку в синтаксисе JSX и как-то её рендерить. Но как это сделать?
Или есть иной способ? Подскажите, пж.

Дополнил: если это важно, компонент будет "собираться" из заранее заготовленных типовых кубиков, каждый из которых описан в своём .tsx файле.

Answer 1

[Егор Живагин]

с бэка прилетает JSON с описанием как должен выглядеть компонент

Так это же 90% любого фронтового проекта, нет? Есть у вас набор "кубиков", пишете контейнер, который получает весь JSON и в его рендере городите if-ы: "есть такие-то данные -> нарисуй такой-то компонент"

Строку из вопроса можно отрендерить через dangerouslySetInnerHtml , но реакт-компонентом это не станет и, я так понимаю, вам не это нужно

Возможно, вы сможете что-то придумать с createElement, но он собирает компонент не из строки

Comments

[Wan-Derer]

Так это же 90% любого фронтового проекта

Дело в том что я во фронте овощ, а в Реакте - мегаОвощ :)
Мне бы примерчик :)

[Егор Живагин]

Wan-Derer, я даже не знаю, что тут написать для примера, если честно)

class Example extends Component {
  renderA = () => {
    // Достали весь JSON пропсов
    const { data } = this.props;
    // если нет данных для блока А - не рисуем его
    if (!data.a) return null;

    // данные есть, значит рисуем один из "кубиков"
    return (
    <ComponentA data={data.a} />
    )
  };

  renderB = () => {
    // Достали весь JSON пропсов
    const { data } = this.props;
    // если нет данных для блока B - не рисуем его
    if (!data.b) return null;

    // данные есть, значит рисуем один из "кубиков"
    return (
    <ComponentB data={data.b} />
    )
  };

  render() {
    return (
      <div>
// Тут можно делать любую вёрстку, в нужные места вставлять вызов this.renderSomething
      {this.renderA();}
      {this.renderB();}
      </div>
    )
  }
}

[Wan-Derer]

Егор Живагин, спасибо. А если с createElement, тренируюсь как-то так:

..................
  const c1 = React.createElement('h2', {children: 'AZAZA'});
  const c2 = React.createElement('div', {children: c1});
.................
  return (
    <div>
      {c2}
    </div>
  );

Правильное направление мысли?

[Егор Живагин]

Wan-Derer, что-то такое, да

Если что, аналог с более привычным фронтам синтаксисом:

..................
  const c1 = <h2>'AZAZA'</h2>;
  const c2 = <div>{c1}</div>;
.................
  return (
    <div>
      {c2}
    </div>
  );