為什么即使我有多個目標元素，React.Component也只渲染一次

Question

我正在嘗試使用React創建一個小部件，它可以多次渲染一個頁面（比如一個特殊的按鈕小部件）。

我正在以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>

運行我的代碼時，我只獲得第一個渲染的代碼。 沒有錯誤！

我試用了React.createClass，似乎渲染了三次。

React我錯過了什么？ 任何幫助贊賞。

Answer 1

您應該將span標記更改為<span class="myWidget"></span>

它有效，你可以檢查---> jsbin

$（document）.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>

為什么即使我有多個目標元素，React.Component也只渲染一次

問題描述

1 個解決方案

解決方案1
0 已采納 2016-06-29 12:37:30

為什么即使我有多個目標元素，React.Component也只渲染一次

問題描述

1 個解決方案

解決方案1 0 已采納 2016-06-29 12:37:30

解決方案1
0 已采納 2016-06-29 12:37:30