文字列をjsxに変換するにはどうすればよいですか？

Question

文字列をどうすればjsxに変換できますか？たとえば、textareaから文字列を取り込むと、どうすればReact要素に変換できますか？

クライアントでこれを変換するプロセスは何ですか？出来ますか？あなたの.babelrcファイルに次の行を追加します。プリセットreact

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

でバベルを使用する必要が

Answer 1

：

{ 
    "presets": ["react"] 
} 

は、あなたがより多くの情報hereを見つけることができます

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

を実行します

Answer 2

あなたは、文字列

<div>Hello World</div> 

考えると、我々は非常に厳格であれば、これは実際には有効なJSXです。問題は、このJSX文字列をReactコードにコンパイルする方法です。

最も簡単で推奨される方法は、Babelのようなライブラリをダウンロードしてコードを変換することです。 Babelはrepl doesのようにブラウザで実行できます。

JSXを他のフォーマットに変換することもできますが、この場合はコンパイラを見つけたり、自分で作成する必要があります。作成する

手順JSX =>自分が変態に反応：

1. は
2. が

ように文字列に戻ってASTと出力コードを解析AST表現にコードの文字列を変換しますJSXをサポートするespreeのようなASTパーサーが必要です。そして、ASTツリーを歩き、React-codeのようなものを出力するコードを作成することができます。

JSXデータのASTツリーは、通常のJavaScript ASTとJSXノードで構成されています。パーサーはツリーを歩き、JSXノードを通常のJavaScriptコードに変換する必要があります。

タグがdivのJSXノードにコンパイルしてコンパイルすると、その呼び出しのパラメータとして挿入されたASTノードの下にある属性とサブノードを持つReact.createElement("div",...コールにコンパイルする必要があります。

ASTツリーを処理できる小さなAST Walkerを作成しました。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; 

免責事項：ライブラリはリアクトにコンパイルするためにintentedされていません。ほとんどの場合、defaultNamespace: "DOM",と一緒に使用して、単純なJavaScript + DOM表現にコンパイルします。単純なタグよりも複雑なものを試そうとすると、エラーが発生する可能性があります。

重要なことは、ReactはJSXの出力形式だけでなく、

Answer 3

私はいくつかの成功（自己閉じタグは問題を引き起こしますが、解決策はプルリクエストに含まれています...）でhtml-to-reactを使用しています。マークアップ文字列をDOMのようなオブジェクトとして解析し、反応する元素。あなたはそれを避けることができれば、そうではありません。しかし、それは仕事を終わらせる。

HTMLから反応githubの時：https://github.com/mikenikles/html-to-react

Answer 4

あなたはJSXの使用を検討することができますが、以下のdangerouslySetInnerHTML

使用例属性：

class YourComponent{ 

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

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

を私は知っている後半あなたのためにある:)が、誰かを助けることを願っています