как передать JSX в виде строки внутри обратного вызова

Question

Можно ли сделать что-то вроде:

const data={
star: "<h1>STAR</h1>",
moon: "<h3>moon</h3>"
}

const App = () => {
return(
<div>{data.start}</div>
);
}

то, что я получаю, это фактическая строка <h1>STAR</h1>, а не просто STAR

Answer 1

Строки могут быть преобразованы в JSX с помощью сторонних библиотек, таких как h2x или react-render-html.Это может быть небезопасно делать с пользовательским вводом из-за возможных уязвимостей и проблем безопасности, которые могут существовать в библиотеках, которые анализируют DOM.

Невозможно использовать компоненты таким образом, потому что имена компонентов не связаны с функциями, которые их реализуют.во время конвертации.

Answer 2

Не думаю, что ты можешь.Вы можете вернуть строку html и, возможно, отобразить ее, но JSX не является строкой, она скомпилирована в код JavaScript, который создает эти элементы.это работает, когда ваше приложение создано, я не думаю, что вы можете использовать динамические строки с ним во время выполнения.Вы могли бы сделать что-то вроде этого:

const getData = (which) => {
  if (which === 'star') {
    return (<h1>STAR</h1>);
  }
  if (which === 'moon') {
    return (<h3>moon</h3>);
  }
  return null; // nothing will display
}


const App = () => {
  return (
    <div>{getData('star')}</div>
  );
};