レンダリング通常のJavaScriptをそのまま

Question

私は反応が新しく、反応しないコードと反応するコードがどのように相互作用できるかを理解しようとしています。 c = new Circle('#container')

とすぐにそのコードが実行されるよう、円がDOM要素で描画されます。

したがって、たとえば、のは、私はこのような構文でDOM要素に円を描くライブラリを持っているとしましょうidはcontainerです。

これに基づいてReactコンポーネントを作成したい場合は、どうすればいいですか？これは私が念頭に置いたものです：

var circ = React.createClass({ 

    componentDidMount: function(){ 
     c = new Circle('#container') 
    }, 

    render: function(){ 
     return (
     <div id="container"></div> 
    ); 
    } 

}); 

これは受け入れ可能なのでしょうか、それとももっと良い方法がありますか？例えば

Answer 1

を持つ要素を隠していますはい、あなたのアプローチは正しいですが、あなたが心に留めておく必要があるいくつかの瞬間があります。

1. ReactはDOMを再レンダリングすることができ、サークルライブラリのバインディングは壊れる可能性があります。したがって、shouldComponentUpdate（）を使用してレンダープロセスを制御します。 https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate
2. サークルライブラリをコンポーネント破壊時にアンバインドすることを忘れないでください。 https://facebook.github.io/react/docs/react-component.html#componentwillunmount

Answer 2

あなたはDOMと対話したい場合は、あなたのようないくつかの要素に特別なrefpropを追加することができます。

<div ref="blabla"></div> 

と通常のJavaScript API、または他の非反応するAPIを使用して対話します。

ReactDOM.findDOMNode(this.refs["blabla"]).style.display='none' 

ここで私はref「blabla」

Answer 3

私は右のそれを理解していれば、サークル（）は、パラメータとして提供DOM要素内の要素を出力します。 それが私だったら、私は別のアプローチをしていました。 DOM要素を管理/編集するためにそのコンポーネントを使用する代わりに、その結​​果結果をDOM要素の内部に出力します。ですからCircle（）がSVGコードを返して#containerの中にそれを表示するならば。 base64イメージを生成するスクリプトであれば、その結果を＃の中に出力してください。

jQueryのように、reactをDOMマネージャとして使用するのではなく、代わりにブロック/コンポーネントマネージャーとして反応してコンポーネントを別のコンポーネントに置き換えようとします。