문자열을 jsx로 변환하려면 어떻게 해야 합니까?

문자열을 jsx로 변환하려면 어떻게 해야 합니까?

문자열을 어떻게 변환하면jsx예를 들어, 에서 문자열을 가져오면textarea, 어떻게 변환하면React요소

var jsxString = document.getElementById('textarea').value;

클라이언트 상에서 이것을 변환하려면 어떻게 해야 합니까?가능합니까?

React 애트리뷰트의 사용을 검토할 수 있습니다.dangerouslySetInnerHTML:

class YourComponent{
  render() {
    someHtml = '<div><strong>blablabla<strong><p>another blbla</p/></div>'
     
    return (
      <div className="Container" dangerouslySetInnerHTML={{__html: someHtml}}></div>
    )
  }
}

개인적으로, 나는 이전 답변에서와 같이 그것을 하는 것을 좋아합니다. 앞의 답변에서 권장한 것처럼dangerouslySetInnerHTML속성을 지정합니다.

대안으로 최근에는 react-html-parser라는 라이브러리가 있습니다.다음의 URL 에 있는 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>;
  }
}

위험하게 사용하지 않고 다음을 수행할 수 있습니다.SetInnerHTML.

import React from "react";

let getNodes = str =>
  new DOMParser().parseFromString(str, "text/html").body.childNodes;
let createJSX = nodeArray => {
  return nodeArray.map(node => {
    let attributeObj = {};
    const {
      attributes,
      localName,
      childNodes,
      nodeValue
    } = node;
    if (attributes) {
      Array.from(attributes).forEach(attribute => {
        if (attribute.name === "style") {
          let styleAttributes = attribute.nodeValue.split(";");
          let styleObj = {};
          styleAttributes.forEach(attribute => {
            let [key, value] = attribute.split(":");
            styleObj[key] = value;
          });
          attributeObj[attribute.name] = styleObj;
        } else {
          attributeObj[attribute.name] = attribute.nodeValue;
        }
      });
    }
    return localName ?
      React.createElement(
        localName,
        attributeObj,
        childNodes && Array.isArray(Array.from(childNodes)) ?
        createJSX(Array.from(childNodes)) :
        []
      ) :
      nodeValue;
  });
};

export const StringToJSX = props => {
  return createJSX(Array.from(getNodes(props.domString)));
};

수입품StringToJSX다음 형식으로 줄을 소품으로 전달합니다.

<StringToJSX domString={domString}/>

PS: 속성 같은 몇 가지 엣지 케이스를 놓쳤을 수 있습니다.

최근에 우연히 이 답을 알게 되었고, 그것은 나에게 좋은 거래였다.문자열을 지정할 필요는 없습니다.JSX 요소의 배열을 반환하면 문제가 해결됩니다.

JavaScript 배열에 JSX 요소를 저장할 수 있습니다.

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

HTML(JSX)에서 다음과 같이 바인드합니다.

<ul>{arrUsers}</ul>

그만큼 간단해.

문자열을 고려한다면

<div>Hello World</div>

엄밀하게 말하면 이것이 유효한 JSX입니다.문제는 이 JSX 문자열을 리액트코드로 컴파일 하는 방법입니다.

가장 쉽고 권장되는 방법은 Babel과 같은 라이브러리를 다운로드하여 코드를 변환하는 것입니다.Babel은 복제와 마찬가지로 브라우저에서 실행할 수 있습니다.

JSX를 다른 형식으로 변환하는 것도 가능하지만 이 경우 컴파일러를 찾거나 직접 생성해야 합니다.

JSX = > React 변환을 직접 작성하는 절차는 다음과 같습니다.

1. 코드 문자열을 AST 표현으로 변환하다
2. AST 및 출력 코드를 구문 분석하여 문자열로 되돌리다

따라서 JSX를 지원하는 espree와 같은 AST 파서가 필요합니다.그 후 AST 트리를 걸어 React - code와 같은 것을 출력하는 코드를 작성할 수 있습니다.

JSX 데이터의 AST 트리는 JSX 노드와 함께 일반 JavaScript AST로 구성됩니다.파서는 트리를 통과하여 JSX 노드를 일반 JavaScript 코드로 변환해야 합니다.

때 인 JSX .React.createElement("div",...AST 노드 아래에 있는 Atribute와 서브노드가 해당 콜의 파라미터로 삽입된 콜.

AST 트리를 React나 DOM과 같은 출력 형식으로 변환하는 데 사용할 수 있는 AST Walker라는 작은 AST Walker를 만들었습니다.

사용 방법의 온라인 예는 다음과 같습니다.

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로 컴파일할 의도가 없습니다. 주주 it it it it it it it it it it와 함께 합니다.defaultNamespace: "DOM",JavaScript + DOM을 사용합니다.단순한 태그보다 복잡한 것을 시도하면 오류가 발생할 수 있습니다.

중요한 것은 React가 JSX에서만 가능한 출력 포맷은 아니라는 점에 유의해야 합니다.

html-to-react를 사용하여 몇 가지 성공을 거두고 있습니다(자체 닫힘 태그는 문제를 일으키지만, 수정은 풀 요청에 있습니다). 마크업 문자열을 DOM과 같은 오브젝트로 해석하고 React 요소를 해석합니다.예쁘지 않으니 피할 수 있으면 그렇게 하세요.하지만 일이 잘 풀리죠

html-to-http://https://github.com/mikenikles/html-to-react 에서 참조할 수 있습니다.

React-JSX-Parser

전용 React-JSX-Parser 라이브러리를 사용할 수 있습니다.

npm install react-jsx-parser

여기 레포입니다

html-syslog-parser가 필요합니다.

import parse from 'html-react-parser';
import React from 'react';

export default function YourComponent() {
    someHtml = '<div><strong>blablabla<strong><p>another blbla</p/></div>'
     
    return (
        <div className="Container">{parse(someHtml)}</div>
    )
}

이를 위한 유틸리티 컴포넌트는 다음과 같습니다.

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

사용 예:

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

은, 「 」로 할 수 .non-string를 array 、 로 、 로 array 。JSX

class ObjReplicate extends React.Component {
  constructor(props) {
    super(props);
    this.state = { myText: '' };
  }
  
  textChange=(e) =>{this.setState({ myText: e.target.value })};

  render() {
    const toShow = this.state.myText;
    var i=1;
    var allObjs=new Array;
    while (i<100){
      i++;
      allObjs[i] = <p>{toShow}</p>; //non-sting array to use  in JSX
   }
   
    return (
      <div>
        <input onChange={this.textChange}></input>
        {allObjs}
      </div>
   );
  }
}

ReactDOM.render(<ObjReplicate/>,document.getElementById('root'));

사전 설정된 반응과 함께 babel을 사용해야 합니다.

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

하다, 하다, 하다, 하다, 하다, 하다에 다음 줄을 추가해 ..babelrc 삭제:

{
  "presets": ["react"]
}

그럼 달려라

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

자세한 내용은 이쪽에서 확인하실 수 있습니다.

언급URL : https://stackoverflow.com/questions/36104302/how-do-i-convert-a-string-to-jsx