Вставить JSX-форматированную строку в компонент React

Вопрос:

У меня небольшая страница реакции, которая должна компилировать и отображать html-строку. html в строке, написанной на основе реакции

Страница выглядит так:

import * as React from ‘react’; import * as ReactDOM from ‘react-dom’; import { Link, Button, Colors } from ‘react-foundation’; require(‘./foundation.css’) var htmlFromApi = ‘<div className=»button-basics-example»><Button color={Colors.SUCCESS}>Save</Button><Button color={Colors.ALERT}>Delete</Button></div>’; var App = ({ html }) => { return <div>{html}</div> } ReactDOM.render( <App html={htmlFromApi}/>, document.getElementById(‘react’) );

Результат вышеуказанного кода – это просто строка, мне интересно, есть ли способ конвертировать строку html в элемент реакции

что-то вроде этого:

var reactElement= toReactElement(htmlFromApi); //the result is <div className=»button-basics-example»><Button color={Colors.SUCCESS}>Save</Button><Button color={Colors.ALERT}>Delete</Button></div>

PS Я пробовал <div className=»content» dangerouslySetInnerHTML={{ __html: htmlFromApi }}></div> и не работал

заранее спасибо

Изменение: код здесь

Лучший ответ:

Первоначально я дал ответ о том, как вы можете вставить строку как HTML непосредственно в React. Однако, поскольку вы также хотите, чтобы переменные внутри вашей строки анализировались (и другая потенциальная логика) до того, как они были вставлены в React, я оставил здесь оба варианта, поскольку они могут быть полезны будущим читателям.

Случай 1 – Ваша строка готова к установке

Если строка, содержащая ваш HTML, готова быть непосредственно вставлена в React и не содержит кода, который необходимо сначала проанализировать, вы должны использовать dangerouslySetInnerHTML. Вы должны установить его в div для упаковки, который будет содержать HTML, извлеченный из вашего API.

См. Пример ниже.

var htmlFromApi = ‘<div className=»button-basics-example»><Button color={Colors.SUCCESS}>Save</Button><Button color={Colors.ALERT}>Delete</Button></div>’; var App = ({html}) => { return <div dangerouslySetInnerHTML={{ __html: html}}></div> } ReactDOM.render(<App html={htmlFromApi}/>, document.getElementById(‘app’));<script src=»https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js»></script> <script src=»https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js»></script> <div id=»app»></div>

Случай 2 – Ваша строка не готова и требует дополнительной логики перед вставкой

Если ваша строка не готова к вводу непосредственно в DOM, но сначала требуется какая-то обработка (например, ваша строка содержит переменные, которые нужно интерпретировать в первую очередь), все становится более сложным. К сожалению, нет хорошего и “рекомендуемого” способа сделать это.

Если требуемая манипуляция проста и довольно статична, вы можете использовать регулярное выражение. Хотя этот подход связан с ограничениями. Случаями использования этого подхода могут быть манипуляции с классом DOM или добавлением элемента в строку.
Другой подход заключается в использовании библиотеки, такой как html-to-react, которая может помочь вам в том, что вы ищете.
Наконец, если вы используете Babel (что почти наверняка), вы можете использовать трансформатор Babel. Все, что вам нужно, – импортировать в свой код babel-core и преобразовать строку в JSX. Этот подход может быть более ограниченным, чем использование библиотеки, но этого должно быть достаточно.

Здесь, как реализовать точку № 3 сверху:

Babel.transform(code, options);

Где code – ваша html-строка. В options нам нужно передать объект с помощью {presets: [‘react’]} чтобы Babel понимал, что хочет, чтобы JSX был нашим выходом. Конечно, вы можете добавить и другие варианты.

Это вернет объект, который содержит такие вещи, как исходная карта, но нас интересует только сгенерированный код здесь. Поэтому нам нужно добавить:

Babel.transform(code, options).code;

Обратите внимание, что code является javascript-кодом в React.createElement формате и выражает вызов функции для создания элемента React с React.createElement. Чтобы выполнить строку как код в javascript, мы можем использовать eval().

Затем мы можем добавить этот элемент React в наш компонент React и отобразить его как обычно, как показано в примере ниже.

Более подробную информацию о Babel.transform см. В официальной документации.