如何为react组件分离和动态设置html模板

var SomeComponent = React.createClass({...});
React.render(new SomeComponent({
template: "SomeComponentTemplate1"
}, document.getElementById('example1'));
React.render(new SomeComponent({
template: "SomeComponentTemplate2"
}, document.getElementById('example2'));

根据道具呈现不同标记的一种真正基本的方法是：

var SomeComponent = React.createClass({
render: function () {
if (this.props.type === "Greeting") {
return <h1>Hello, {this.props.name}</h1>;
}
if (this.props.type === "Farewell") {
return <h1>Goodbye {this.props.name}</h1>;
}
return <div>Error</div>;
}
});
React.render(
<SomeComponent type="Greeting" name="DsXack" />,
document.getElementById("example");
);
// => <h1>Hello, DsXack</h1>

你可以通过将每个"模板"放入自己的函数来使其更干净，但它仍然不太好。

更惯用的方法是为每个"模板"都有一个不同的组件：

var Greeting = React.createClass({
render: function () {
return <h1>Hello, {this.props.name}</h1>;
}
});
var Farewell = React.createClass({
render: function () {
return <h1>Goodbye, {this.props.name}</h1>;
}
});
var SomeComponent = React.createClass({
render: function () {
return React.createElement(this.props.type, this.props);
}
});
React.render(
<SomeComponent type={Farewell} name="DsXack" />,
document.getElementById("example");
);
// => <h1>Goodbye, DsXack</h1>

因为SomeComponent的this.props.type是Fareway组件(注意大括号——我们传递的是实际的类，而不是字符串)，所以我们可以将其作为第一个参数直接传递给React.createElement，然后将this.props作为第二个参数传递，所以Fareway得到了相同的道具。