2017-10-25 8 views
0

したがって、React、babelおよびmarked.jsを使用してgit markdownプレビューアを構築しようとしています。 Marked.jsはマークダウンパーサーです。reactDOM.render、marked.js、およびbabelで入力として文字列を使用する

だから私は自分のhtmlから使いたいという価値があると言います。

<div id="markdownInput"># This is my input</div> 

私は変数myInputとして保存します。

var myInput = document.getElementById("markdownInput").value; 

myInputは "#This is my input"であり、文字列です。 Marked.jsは "marked()"という関数を使用します。これは文字列を入力として受け取り、gitのマークダウンをhtmlに変換します。値下げは(#=> H1)に変換されるが、それはまた、文字列として格納されていることを

"<h1>This is my input</h1>" 

注意:

var myOutput = marked(myInput); 

myOutputは今と同じです。

<h1>This is my input</h1> 

ではなく、これは私の入力である」を表示:私のHTMLで

ReactDOM.render(myOutput, document.getElementById("output-container")); 

私の「出力コンテナ」表示で終了:私はそうは次のようにreactDOM.renderでこれを使用しようとすると "を大きなヘッダー文字で入力します。それは、React.DOM.render()が文字列ではなく入力としてオブジェクトを必要とすることです。オブジェクトとして

<h1>This is my input</h1> 

をしかしマーク()関数はのみ(引用符内のすべてを包む)文字列として出力したので、私はそれを文字列として入力しています:それは必要です。

myOutputをオブジェクトに変換するためにできることはありますか?私は非常にリアクションすることを知っていたので、おそらく私はこれのようなものに対してより良い方法を学んだことはありません。

おかげ

答えて

1

さて、このUsing marked in reactを発見し、 "dangerouslySetInnerHTML" 属性を使用していました。しかし、おそらくこれを行うためのより良い方法はありますか?

+0

これは方法です。そしてそれが述べているように、それを行うことは本当に危険です。特にこの例では、あなたが望むものを何でも入力することができます。 –

関連する問題