Как мне преобразовать строку в JSX?

Вы можете использовать атрибут JSX dangerouslySetInnerHTML

Пример использования ниже:

class YourComponent{

render() {
   someHtml = '<div><strong>blablabla<strong><p>another blbla</p/></div>'

   return(
       <div className="Container" dangerouslySetInnerHTML={{__html: 
        someHtml}}></div>
    )
  }
}

Я знаю, что поздно тебе:), но надеюсь, что это может помочь кому-то еще.

Я использую html-to-response с некоторым успехом (самозакрывающиеся теги вызывают проблему, хотя, но исправление находится в запросах на перенос...), чтобы анализировать строки разметки как объекты типа DOM, и, в свою очередь, реагировать элементы. Это некрасиво, и если вы можете избежать этого, сделайте это. Но он выполняет свою работу.

html-to-response в github: https://github.com/mikenikles/html-to-react

Если вы считаете строку

<div>Hello World</div>

Если мы очень строги, это действительно действительный JSX. Вопрос заключается в том, как скомпилировать эту строку JSX в код React.

Самый простой и рекомендуемый способ - загрузить некоторую библиотеку, такую ​​как Babel, и использовать ее для преобразования кода. Babel может работать в браузере, как repl.

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

Шаги по созданию самого JSX = > React transform:

• преобразует строку кода в представление AST
• проанализируйте AST и выведите код обратно в строку

Итак, вам нужно что-то вроде анализатора АСТ, например espree, поддерживающего JSX, а затем вы можете создать код, который проходит дерево AST и выводит что-то, например, React-code.

Дерево AST для данных JSX состоит из обычного JavaScript AST вместе с узлами JSX. Парсер должен пройти через дерево и преобразовать узлы JSX в обычный код JavaScript.

Если вы скомпилируете React и встретите JSX node с тегом "div", вы должны скомпилировать это в вызов React.createElement("div",... с атрибутами и подносами, найденными в этом AST node, вставленном в качестве параметров этого вызова.

Я создал небольшой AST Walker, который может обрабатывать дерево AST, ASTWalker, который может быть использован для преобразования дерева AST в некоторый выходной формат, например React или DOM.

Он-лайн пример того, как его использовать:

http://codepen.io/teroktolonen/pen/KzWVqx?editors=1010

Основной код выглядит следующим образом:

    // here is the JSX string to parse
    var codeStr = "<div>Hello world</div>";
    var walker = ASTWalker({
        defaultNamespace: "react",
    });
    // compile AST representation out of it.
    var rawAST = espree.parse(codeStr, {
          ecmaVersion: 6,
          sourceType: "script",
          // specify additional language features
          ecmaFeatures: {
            // enable JSX parsing
            jsx: true
          } 
        });

   // then you can walk the walk to create the code
   walker.startWalk( rawAST, {} );
   var code = walker.getCode();  
   console.log(code); 
   document.getElementById("sourceCode").innerHTML = code;

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: библиотека не предназначена для компиляции в React. В основном он используется с defaultNamespace: "DOM",, используя его для компиляции в простое представление JavaScript + DOM. Попытка сделать что-либо более сложное, чем простые теги, может привести к ошибке.

Важно отметить, что React - это не только возможный формат вывода для JSX.

Лично я люблю делать это так же, как и в предыдущем ответе, в котором рекомендуется использовать свойство dangerouslySetInnerHTML в JSX.

В качестве альтернативы, в настоящее время существует библиотека под названиемact -html-parser. Вы можете проверить его и установить из реестра NPM по этому адресу: https://www.npmjs.com/package/react-html-parser. Сегодня еженедельная статистика загрузки для этого пакета составляет 23 696. Выглядит довольно популярная библиотека для использования. Даже он выглядит более удобным в использовании, но мне все же нужно больше читать и больше размышлять, прежде чем реально его использовать.

Фрагмент кода, скопированный со страницы NPM:

import React from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';

class HtmlComponent extends React.Component {
  render() {
    const html = '<div>Example HTML string</div>';
    return <div>{ ReactHtmlParser(html) }</div>;
  }
}

Я недавно столкнулся с этим ответом, и это было для меня очень выгодно. Вам не нужно предоставлять строку. Возврат массива элементов JSX сделает свое дело.

Мы можем хранить элементы JSX в массиве JavaScript.

let arrUsers = [<li>Steve</li>,<li>Bob</li>,<li>Michael</li>];

и в вашем HTML (JSX) свяжите это как,

<ul>{arrUsers}</ul>

Так просто, как есть.

Вам нужно использовать babel с предустановленным react

npm install --save-dev babel-cli babel-preset-react

Добавьте в свой файл .babelrc следующую строку:

{
  "presets": ["react"]
}

Затем запустите

./node_modules/.bin/babel script.js --out-file script-compiled.js

Вы можете найти более подробную информацию здесь