2016-08-30 23 views
-3

Test1.html、Test2.html、Test3.html ...など異なるフォームデータを持つファイル。私は、Test1.js、Test2.js Test3.jsコンポーネントのようなreactJSコンポーネントを完全な情報で生成したいと考えています。ReactJS:htmlファイルをReactコンポーネントに変換する

私たちは入力としてHTMLファイルを受け取り、反応コンポーネントを自動的に変換する共通のreactjsプラグインのようなアイデアを持っています。開発者は、独自のコンポーネントをhtmlファイルから変換するための別のコードを書く必要はありません。ちょうど私はそれをプラグインにしたい

入力としてhtmlファイルをアップロードし、完全なデータでreactjsコンポーネントを生成するだけです。

にする.htmlファイルが入力されており、 期待される出力が反応コンポーネントです。

これを行う方法を教えてください

+0

これは、HTML要素のみからなる "ダム"プレゼンテーションコンポーネントの完全な例では可能ですが、それ以上のものは非常に難しいでしょう。ここで何か魔法を求めているようですね。 –

+0

私はVAR htmlInput = '

Title

A paragraph

' onthis明瞭さを与えてみましょう; //は、({ レンダリング:; ); } 機能(){ をリターン( \t htmlInput})htmlファイルのVAR SampleOneComponent = React.createClassをアップロードします。 –

答えて

0

それは良い考えではありません。私はあなたの反応コンポーネント内の状態でいくつかの操作を実行する必要があるか、単にhtmlが必要かどうかわかりません。 render()にhtmlしか必要ない場合は、次のようにすることができます:

componentWillMount() { 
    // get your data from html 
    ... 
    this.data = your_data; 
} 

render() { 
    return (
     <div dangerouslySetInnerHTML={{__html: this.data}}></div> 
    ); 
} 

もう一度お勧めしません。

+0

yes phanあなたはそうだと言いましたが、私は共通のプラグインを作りたいと思っています。誰もが自分のコンポーネントをコンバートするために再利用したいと思っています。 reactjsは純粋にコンポーネントベースです。ここでhtmlファイルをコンポーネントにしています。 –

+0

https://www.npmjs.com/package/html-to-react-componentsをベースにすることができます。試してみる。 –

+0

上記のコードのダウンロードリンクを教えてください。 –

関連する問題