Question

我对React.js很新，但是我正在探索它，我期待一些我无法做到的事情。

说我有一个组件：

var SampleComponent = React.createClass({
  render: function() {
    return (
      <div>Hello</div>
    );
  }
});

这是将它添加到DOM的唯一方法吗？

React.render(
  <SampleComponent />,
  document.getElementById('content')
);

我希望在定义组件后，我可以直接在HTML中执行此类操作：

    <!DOCTYPE html>
    <html lang="en">
        <head></head>
        <body>
            <SampleComponent />
        </body>
    </html>

我错过了什么吗？感谢

Answer 1

不，使用React.render()是唯一的方式＆＃34;去做吧。

您可能会期待Web组件之类的内容，您可以在其中定义custom elements并将其放在HTML中，但这并不是React工作的方式（或许可能）。

但是有一个名为x-react的库，您可以在其中注册这些类型的元素，但它仍然是JavaScript驱动的，而不是直接的HTML。

Answer 2

在一个典型的应用程序中，您将以这种方式将一个高级控制器视图组件安装到DOM，但该组件将在其render方法中包含子组件的层次结构，以构建接口的结构。这是可组合视图的概念，这是反应的优点。这些子组件可以直接在父母的jsx中使用。以您希望的方式渲染方法，因此您只需要在顶级组件上调用React.render一次。

React.js直接在HTML中编写组件

2 个答案: