React JS追加

Question

JSBin

我想在每次单击按钮时将obj附加到容器上，我该怎么做？

这只是替换容器。

另外，我想在jquery中保留button1，button2的按钮eventListeners。

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'))

这将向#container添加一个空div并将该div返回给React使用的渲染函数

Answer 2

使用另一个var final来存储更新的值，每次单击按钮，将该数组放入此var中，并使用final创建ui，试试这个：

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