使用React

Question

很难理解正确的方法，因为大多数示例似乎都使用了我不想使用的Babel。

我有以下课程：

            class regionalTrendsTemplate2 extends React.Component {
                renderTemplate(article) {
                    return React.createElement('div', { className: this.props.cellsize },
                                                React.createElement('div', { className: 'card', style: { 'marginBottom': '50px', 'boxShadow': '0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19)' } },
                                                React.createElement('div', { className: 'card-block' },
                                                React.createElement('div', { className: 'card-img-top', style: { 'height': '250px', 'borderRadius': '.25rem', 'boxShadow': '0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19)', 'backgroundImage': 'url(' + workingDirectory + 'images/trendsImages/' + article.image + ')', 'backgroundSize': 'cover', 'backgroundRepeat': 'no-repeat', 'backgroundPosition': 'center center' } }),
                                                React.createElement('div', { className: 'card-body' },
                                                React.createElement('div', { className: 'card-title' }, ''),
                                                React.createElement('div', { className: 'card-text' }, article.text)))))
                }

                render() {
                    var self = this;
                    const rows = [];
                    trends[0].Trends[0].Regional.map(function (article, index) { rows.push(self.renderTemplate(article)) });
                    return  rows
                }

            }

通过该方法调用哪个：

ReactDOM.render(React.createElement(regionalTrendsTemplate2, { cellsize: 'col-sm-3'}), document.getElementById('divRegionalTrends'));

我这样做的原因是，我可以通过一个调用传递各种道具，然后将其填充到模板中。到目前为止一切顺利。

但是，render（）方法对我的HTML和“ divRegionalTrends”容器中的内容确实做了一些奇怪的格式化。

如果我具有以下条件：

            var regionalTrendsTemplate = trends[0].Trends[0].Regional.map(function (article, index) {
                return React.createElement('div', { className: 'col-sm-3' },
                        React.createElement('div', { className: 'card', style: { 'margin-bottom': '50px', 'box-shadow': '0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19)' } },
                        React.createElement('div', { className: 'card-block' },
                        React.createElement('div', { className: 'card-img-top', style: { 'height': '250px', 'borderRadius': '.25rem', 'boxShadow': '0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19)', 'backgroundImage': 'url(' + workingDirectory + 'images/trendsImages/' + article.image + ')', 'backgroundSize': 'cover', 'backgroundRepeat': 'no-repeat', 'backgroundPosition': 'center center' } }),
                        React.createElement('div', { className: 'card-body' },
                        React.createElement('div', { className: 'card-title' }, ''),
                        React.createElement('div', { className: 'card-text' }, article.text)))))
            });
            
            var regionalTrends = React.createElement('div', { 'cellsize': 'col-md-3' }, regionalTrendsTemplate);
            ReactDOM.render(regionalTrends , document.getElementById('divRegionalTrends'));

然后完美呈现在“ divRegionalTrends” div中，但我似乎无法访问任何道具！

有人可以解释哪种方法正确吗？

将道具传递到从父级冒泡的模板中，或者为什么第一种方法中的渲染完全不同。