React.js直接用HTML编写组件

React.js write components directly in HTML

本文关键字：组件 HTML js React      更新时间：2023-09-26

我对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>

我是不是错过了什么？感谢

否，使用React.render()是"唯一的方法"。

你可能会期待像Webcomponents这样的东西，在那里你可以定义自定义元素并将它们放在HTML中，但这不是React的工作方式（也许）。

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

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

相关文章：