Как преобразовать строку в jsx?

Ответ 1

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

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

class YourComponent{

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

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

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

Ответ 2

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

<div>Hello World</div>

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

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

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

Шаги для создания преобразования JSX => React самостоятельно:

1. преобразовать строку кода в представление AST
2. анализировать AST и выводить код обратно в строку

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

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

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

Я создал небольшой 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.

Ответ 3

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

html-реакция на github: https://github.com/mikenikles/html-to-react

Ответ 4

Лично я люблю делать это так же, как и в предыдущем ответе, в котором рекомендуется использовать свойство 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>;
  }
}

Ответ 5

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

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

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

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

<ul>{arrUsers}</ul>

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

Ответ 6

Вот небольшой вспомогательный компонент для этого:

const RawHtml = ({ children="", tag: Tag = 'div', ...props }) =>
  <Tag { ...props } dangerouslySetInnerHTML={{ __html: children }}/>;

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

<RawHtml tag={'span'} style={{'font-weight':'bold'}}>
  {"Lorem<br/>ipsum"}
</RawHtml>

Ответ 7

Вам нужно использовать 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

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