React.Componentが複数のターゲット要素を持っていても1回だけレンダリングする理由

Reactでページを何度もレンダリングするウィジェットを作成しようとしています（特別なボタンウィジェットなど）。React.Componentが複数のターゲット要素を持っていても1回だけレンダリングする理由

私はこのようなES6スタイルで私のクラスを定義しています：

export default class myWidget extends React.Component{ 

..."constructor and other methods".... 

    render(){ 
     return <div className="myButtonStyles">Click me</div>; 
    }  

}

私のHTMLは、単にいくつかの同一の要素とjQueryのセレクタを持っている：

$(document).ready(function(){ 
    $.each($('.myWidget'), function(index, element){ 
     ReactDOM.render(
      <App/>, 
      element 
     ); 
    }) 
}); 

<div>First one <span class="myWidget"/></div> 
<div>Second one <span class="myWidget"/></div> 
<div>A third <span class="myWidget"/></div>

私のコードを実行している場合は、私が最初に取得1つはレンダリングされます。エラーはありません！

代わりにReact.createClassを試してみたところ、3回レンダリングされているようです。

リアクションでは何が欠けていますか？どんな助けもありがたい。あなたはそれが動作<span class="myWidget"></span>

にあなたのspanタグを変更する必要があります

出典

2016-06-29 sleeveroller

、あなたは$（文書）で--->jsbin

バリアントを確認することができます.ready --->jsbin

class Block extends React.Component { 
    render(){ 
     return (<div>Block</div>); 
    } 
} 

$(document).ready(function(){ 
    $.each($('.block'), function(index, element){ 
     ReactDOM.render(
      <Block/>, 
      element 
     ); 
    }) 
}); 

///html 

<body> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
</body>

出典

2016-06-29 12:37:30

閉じタグが全体の良い朝を台無しにする可能性がある信じられないほど！ありがとう@Utro – sleeveroller

React.Componentが複数のターゲット要素を持っていても1回だけレンダリングする理由

答えて

関連する問題