如何在不使用 JSX 的情况下编写它？
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
这来自 react.js 教程：http ://facebook.github.io/react/docs/tutorial.html
我知道我可以做到以下几点：
return (
React.createElement('div', { className: "commentBox" },
React.createElement('h1', {}, "Comments")
)
但这只是增加了一个元素。我怎样才能添加更多彼此相邻。
您可以使用在线Babel REPL ( https://babeljs.io/repl/ ) 作为将小块 JSX 转换为等效 JavaScript 的快速方法。
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
React.createElement("div", {className: "commentBox"},
React.createElement("h1", null, "Comments"),
React.createElement(CommentList, null),
React.createElement(CommentForm, null)
)
);
}
});
检查它支持的 ES6 转换的转译器输出的内容也很方便。
insin 的答案是直接翻译，但是您可能更喜欢使用工厂。
var div = React.createFactory('div'), h1 = React.createFactory('h1');
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
div({className: "commentBox"},
h1(null, "Comments"),
React.createElement(CommentList, null),
React.createElement(CommentForm, null)
)
);
}
});
createFactory 基本上部分应用了 createElement。所以以下是等价的：
React.createElement(c, props, child1, child2);
React.createFactory(c)(props, child1, child2);
如果你只是使用 es6 但不喜欢 JSX，你可以通过解构赋值来减少它的冗长。看到这个jsbin使用6to5代替JSX一个互动的例子。
var [div, h1, commentForm, commentList] = [
'div', 'h1', CommentForm, CommentList
].map(React.createFactory);
如果您有可变数量的孩子，那么您可以使用它：使用带有参数数组的应用函数。
React.createElement.apply(this, ['tbody', {your setting}].concat(this.renderLineList()))
其中 renderLineList 是例如：
renderLineList: function() {
var data=this.props.data;
var lineList=[];
data.map(function(line) {
lineList.push(React.createElement('tr', {your setting}));
});
return lineList;
}
您只需将它们作为子组件一个接一个地添加到您的父组件中，
return React.createElement("div", null,
React.createElement(CommentList, null),
React.createElement(CommentForm, null)
);