ReactJS使用JavaScript中的Web组件

ReactJS use a webcomponent in JavaScript

本文关键字：Web 组件 中的 JavaScript 使用 ReactJS      更新时间：2023-09-26

我可以在React中找到很多使用JSX的WebComponent的文档。好吧，它是相当直接的。。。

但是如何在ReactJS中使用JavaScript中的Web组件呢？？

render: function(){
  React.DOM.div {}, 
    MyWebComponent {}, "hello"

其中"MyWebComponent"是我要使用的组件。

在JavaScript中，react.createElement将元素或组件作为第一个参数，styles作为第二个参数，children作为第三个参数。

            import customComponent from 'my-custom-component';
            var child = React.createElement(customComponent, null, 'Text Content');
            var Element = React.createElement('div', { className: 'my-class' }, child);

            render: function(){ 
                {Element}
            }

或者你可以做这个

...
 import customComponent from 'my-custom-component';
...
render: function(){ 
       {React.createElement('div', { className: 'my-class' },customComponent );}
}

如官方react网站所述，您应该能够使用带有react 的web组件

render: function(){
  return <div><MyWebComponent>hello</MyWebComponent></div>;
}

这是纯js 中的相同示例

render: function render() {
  return React.createElement(
    "div",
    null,
    React.createElement(
      MyWebComponent,
      null,
      "hello"
    )
  );
}
相关文章：