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

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

javascript dom reactjs

Javascript React.js直接在HTML中编写组件,javascript,dom,reactjs,Javascript,Dom,Reactjs,我是React.js的新手，但在探索React.js的过程中，我期待着一些我无法做到的事情假设我有一个组件： var SampleComponent = React.createClass({ render: function() { return ( <div>Hello</div> ); } }); <!DOCTYPE html> <html lang="en"> <

我是React.js的新手，但在探索React.js的过程中，我期待着一些我无法做到的事情

假设我有一个组件：

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

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

var SampleComponent=React.createClass({
render:function（）{
返回(
你好
);
}
});

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

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

React.render(
,
document.getElementById（'content'）
);

我希望在定义了组件之后，能够直接在HTML中执行类似操作：

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

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

我错过什么了吗？谢谢

否，使用

React.render（）

是执行此操作的“唯一方法”

您可能期望Web组件中有一些东西，您可以在其中定义自己并将其放入HTML中，但React的工作方式可能不是这样的（也许现在还不是这样）

然而，有一个名为

x-react

的库，您可以在其中注册这些类型的元素，但它仍然是JavaScript支持的，而不是直接的HTML。

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

React.render

如何在一个页面上呈现两个不同的控制器视图？我相信React.render（）只允许一个附件。。如何在页面上获取另一个？我没有尝试这样做，但我认为可以有多个React.render调用，每个视图层次结构/装载节点一个。但您也可以将它们封装在单个组件中，然后安装它。我所理解的“控制器视图”只是指管理应用程序状态的视图，不一定是以某种方式呈现的。我对这个问题的看法不好-您可以附加'n'个React.render。我只是在升级我的密码。谢谢你的回复。现在我也在调查这件事，因为我想导出我的React组件，让其他人可以轻松地将它们实现到他们的网站中，我认为如果可以使用HTML元素的话，这将简化导入过程。似乎唯一接近这一点的是Maple.js，尽管我没有深入研究它：谢谢，我以为我以前在某处看到过它，但现在我猜是vuejs，在这里您可以直接在HTML文件中声明/使用组件。显然，在2021年，这也不可能在react中实现。