我如何为 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 模板渲染 SomeComponent SomeComponentTemplate1 和 SomeComponentTemplate2

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>

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

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

How I can separate and dynamic set html template for react component?

javascript

reactjs