如何使用一个组件在 reactjs 中渲染多个 html 片段？答案

【问题标题】：how to use one component render many html fragment in reactjs?如何使用一个组件在 reactjs 中渲染多个 html 片段？
【发布时间】：2014-08-28 21:50:43
【问题描述】：

我有一个按钮，当我点击这个按钮时，我想渲染一个div 并将其附加到body。

当我再次单击此按钮时，将呈现一个新的div。

我要：点击按钮多少次，渲染多少div。

以下代码只能渲染一个div:(jsFiddle:http://jsfiddle.net/pw4yq/)

var $tool = document.getElementById('tool');
var $main = document.getElementById('main');

var partBox = React.createClass({displayName: 'partBox',
    render: function(){
        return (
            React.DOM.div({className:"box"}, "HELLO! ", this.props.ts)
        )
    }
});

var createBoxBtn = React.createClass({displayName: 'createBoxBtn',

    createBox: function(){
        var timeStamp = new Date().getTime();
        React.renderComponent(partBox( {ts:timeStamp} ), $main);
    },

    render: function(){
        return (
            React.DOM.button( {onClick:this.createBox}, "createBox")
        )
    }
});

React.renderComponent(createBoxBtn(null ), $tool);

【问题讨论】：

请分享 jsfiddle
@BhushanKawadkar jsfiddle.net/pw4yq

标签： javascript html reactjs

【解决方案1】：

您的应用程序应该是数据驱动的，这意味着您的应用程序的状态保持在 DOM 之外。在您的示例中，您实际上是在保留 Date 对象的列表。将其置于您可以修改的状态，并为您创建的每个 Date 对象呈现一个框：

工作 JSFiddle：http://jsfiddle.net/pw4yq/6/

var $main = document.getElementById('main');

var partBox = React.createClass({displayName: 'partBox',
    render: function(){
        return (
            React.DOM.div({className:"box"}, "HELLO! ", this.props.ts)
        )
    }
});

var createBoxBtn = React.createClass({displayName: 'createBoxBtn',

    createBox: function(){
        var timeStamp = new Date().getTime();
        this.props.onClick({ts: timeStamp});
    },

    render: function(){
        return (
            React.DOM.button({onClick: this.createBox}, "createBox")
        )
    }
});

var app = React.createClass({
    displayName: "app",

    getInitialState: function() {
        return {
            partBoxes: []
        };
    },

    createBox: function(partBox) {
        this.state.partBoxes.push(partBox);
        this.forceUpdate();
    },

    render: function() {
        return (
            React.DOM.div(null,
                createBoxBtn({onClick: this.createBox}),
                this.state.partBoxes.map(function(pb) {
                    return partBox({key: pb.ts, ts: pb.ts});
                })
            )
        );
    }
});


React.renderComponent(app(null), $main);

【讨论】：