javascript - 如何为React组件分离和动态设置html模板？

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 没有模板，它有组件。也许这种区别看起来很学术，但在这里却至关重要。

根据 Prop 渲染不同标记的真正基本方法是:

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>

您可以通过将每个"template"放入其自己的函数中来使这个更清晰，但这仍然不是很好。

更惯用的方法是为每个"template"都有一个不同的组件:

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 是 Farewell 组件(请注意大括号 - 我们传递的是实际的类，而不是字符串)，所以我们可以直接将其作为第一个参数传递到 React.createElement，然后传递 this.props 作为第二个参数，因此 Farewell 获得相同的 props。