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

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() 是 "only way" 来做到这一点。

您可能期望像 Webcomponents 这样的东西，您可以在其中定义您 custom elements 并将它们放在您的 HTML 中，但这不是 React 的工作方式（但也许）。

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

Answer 2

在典型的应用程序中，您会以这种方式将高级控制器视图组件安装到 DOM，但该组件会在其渲染方法中包含子组件的层次结构以构建结构你的界面。这就是可组合视图的想法，这是 React 的一个优势。这些子组件可以按照您希望的方式直接在父级渲染方法的 jsx 中使用，因此您实际上只需在顶级组件上调用一次 React.render。

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

React.js write components directly in HTML

javascript

dom

reactjs