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

Question

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

4

我是一名新手，正在探索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>

我有点没明白，谢谢。

- pistacchio

现在我也正在研究这个问题，因为我想将我的React组件导出，让其他人能够轻松地将它们实现到他们的网站中，并且如果可以使用HTML元素来实现导入，我认为这将简化导入过程。唯一看起来接近这一点的是Maple.js，虽然我还没有深入了解过： https://github.com/Wildhoney/Maple.js/ - Tobias Helbich

2个回答

0

在典型的应用程序中，您将挂载一个高级控制器-视图组件到DOM上，但该组件将包含一系列子组件在其渲染方法中构建界面结构。这就是可组合视图的概念，这是React的优点之一。这些子组件可以直接在父组件的JSX中使用，因此您只需要在顶层组件上调用React.render一次即可。

- Adam Stone

你如何在一个页面上呈现两个不同的控制器视图？我相信React.render()只允许一个附件..那么你怎么把另一个放到页面上呢？ - james emanon

我自己没有尝试过，但是我认为您可以使用多个React.render调用，每个调用对应一个视图层次结构/挂载节点。但是您也可以将它们包装在单个组件中进行挂载。据我所理解，“控制器-视图”只是意味着该视图正在管理应用程序状态，不一定意味着它以某种特定的方式呈现。 - Adam Stone

对不起，关于那个问题是我的错 - 你可以附加“n”个React.render。我只是把我的代码搞砸了。谢谢回复。 - james emanon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Henrik Andersson · Accepted Answer

不，使用React.render()是唯一的方法。您可能期望类似于Web组件的东西，可以定义您的自定义元素并将其放入HTML中，但这不是React的工作方式（也许以后会有）。然而，有一个名为x-react的库，您可以在其中注册这些类型的元素，但仍由JavaScript驱动，而不是直接使用HTML。