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

IT技术 javascript dom reactjs
2021-04-09 06:45:08

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

我错过了什么吗？谢谢

2个回答

不，使用React.render()是做到这一点的“唯一方法”。

您可能会期待 Webcomponents 之类的东西，您可以在其中定义自定义元素并将它们放入您的 HTML 中，但这不是 React 的工作方式（也许还没有）。

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

谢谢 我以为我以前在某个地方看到过，但现在我猜它是 vuejs，您可以在其中直接在 HTML 文件中声明/使用组件。显然，在 2021 年，这也无法在 React 中完成。
2021-05-30 06:45:08

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

我对这个问题不好 - 你可以附上'n'个React.render。我只是在装我的代码。谢谢回复。
2021-05-30 06:45:08
我没有尝试过这样做，但我认为您可以有多个 React.render 调用，每个视图层次结构/挂载节点一个。但是您也可以将它们包装在一个组件中并安装它。据我所知，“控制器视图”仅表示管理应用程序状态的视图，不一定以某种方式呈现。
2021-06-03 06:45:08
如何在页面上呈现两个不同的控制器视图？我相信 React.render() 只允许一个附件......你如何在页面上获得另一个？
2021-06-15 06:45:08
其它你可能感兴趣的问题
上一篇使用 NextJS 的自托管字体 下一篇React - 从孩子身上移除props