陣營JS附加

Question

JSBin

我要追加在容器每次obj的我點擊按鈕，我該怎麼辦呢？

這僅更換容器。

另外我想保留jQuery中button1，button2的按鈕eventListener。

HTML

<h1 class="h1">This is H1</h1> 
<button class="button1">This is button1</button> 
<button class="button2">This is button2</button> 
<div id="container"></div> 

JSX

var obj = [ 
     { 
      'name' : 'Denis Mcarthy', 
      'id' : 5, 
      'comment' : "fuck this shit", 
      'me' : true, 
      'pp' : 'https://avatars2.githubusercontent.com/u/598730?v=3&s=88' 
     }, 
     { 
      'name' : 'John Cena', 
      'id' : 8, 
      'comment' : "This is Dope. Bring some Coke", 
      'pp' : 'https://avatars0.githubusercontent.com/u/96150?v=3&s=88' 
     }    
    ]; 
    var obj2 = [ 
     { 
      'name' : 'Kendall Bitch', 
      'id' : 5, 
      'comment' : "What the Fuck", 
      'me' : true, 
      'pp' : 'https://avatars2.githubusercontent.com/u/598730?v=3&s=88' 
     }, 
     { 
      'name' : 'Randy Orton', 
      'id' : 8, 
      'comment' : "Suck this bitch", 
      'pp' : 'https://avatars0.githubusercontent.com/u/96150?v=3&s=88' 
     }    
    ];  
$('.button1').click(function(){ 
    renderTweet(obj); 
}); 
$('.button2').click(function(){ 
    renderTweet(obj2); 
}); 



     function renderTweet(obj){ 
     var TweetBox = React.createClass({ 
      render: function() { 
      return ( 

     <div> 
      {obj.map((row,i) =>  
       <div className="well clearfix"> 
        <img src={row.pp} /> 
        <div id={row.id}> 
         {row.name} 
         <br /> 
         {row.comment} 
        </div> 
       </div> 
      )} 
     </div> 

      ); 
      } 
     }); 


     ReactDOM.render(
      <TweetBox />, 
      document.getElementById("container") 
     );  
    } 

Answer 1

不要渲染到document.getElementById("container")，但document.getElementById("container").appendChild(document.createElement('div'))

這將一個空div追加到#container並返回該div到React to的渲染函數使用

Answer 2

使用另一個變種final將存儲更新後的值，每次單擊該按鈕，把該數組在這個變種，並利用final創建用戶界面，試試這個：

let final = []; 
$('.button1').click(function(){ 
    final = final.concat(obj); 
    renderTweet(final); 
}); 
$('.button2').click(function(){ 
    final = final.concat(obj2); 
    renderTweet(final); 
}); 

檢查這用於工作實施例：

jsbin：https://jsbin.com/fofasuruno/edit?html,js,output