javascript - React JS 追加

Question

JSBin

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

这只是替换容器。

我还想在jquery中保留button1、button2的按钮事件监听器。

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 使用