Question

我该怎么做：

var SomeComponent = React.createClass({...});

React.render(new SomeComponent({
    template: "SomeComponentTemplate1"
}, document.getElementById('example1'));

React.render(new SomeComponent({
    template: "SomeComponentTemplate2"
}, document.getElementById('example2'));

使用不同的html模板 SomeComponentTemplate1 和 SomeComponentTemplate2

渲染 SomeComponent

Answer 1

React没有模板，它有组件。也许这种区别似乎是学术性的，在这里至关重要。

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

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>

你可以把每个＆＃34;模板＆＃34;进入它自己的功能，但它仍然不是很好。

更惯用的方法是为每个＆＃34;模板提供一个独特的组件＆＃34;：

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是告别组件（注意大括号 - 我们正在传递实际的类，而不是字符串），那么我们可以直接将它作为第一个参数传递给React.createElement，然后传递this.props作为第二个参数，所以Farewell获得相同的道具。

我如何分离和动态设置反应组件的html模板？

1 个答案: