如何正确导入 Web 组件以响应应用程序？

Question

我有一个 catalago-component.js，它是一个 Web 组件。我正在尝试像这样使用此 Web 组件：

import React from 'react'
import './../../../assets/catalago-component'
class Loja extends React.Component{
    constructor(props){
        super(props)
        this.state = {}
    }

    render(){
        return(
            <React.Fragment>
                <div className="page-header">
                    <h1 className="page-title">Loja</h1>
                </div>
                <catalago-component></catalago-component>
            </React.Fragment>
        )
    }
}
export default Loja

但每次我运行我的 React 应用程序都会收到此错误

src\assets\catalago-component.js
          Line 1:1:       Expected an assignment or function call and instead saw an expression  no-unused-expressions
          Line 1:85:      Expected an assignment or function call and instead saw an expression  no-unused-expressions
          Line 1:399:     Expected an assignment or function call and instead saw an expression  no-unused-expressions
          Line 1:599:     Expected an assignment or function call and instead saw an expression  no-unused-expressions
          ...

但如果我对应用程序进行任何更改使其重新编译，那么它就可以正常工作

如何永远解决这个错误？我不希望这个应用每次运行第一次出现时都会崩溃

编辑：我尝试将此 Web 组件与纯 html 一起使用并且它有效。看看

https://eduardopreuss.github.io/web-component/

https://github.com/eduardopreuss/web-component

编辑 2：link 使用反应 + 网络组件 https://codesandbox.io/s/hopeful-cohen-ut6mv?file=/src/App.js

到 codesandbox

Answer 1

我想你可能想尝试这样的事情：

import Catalago from './../../../assets/catalago-component'

然后使用如下组件：

<Catalago></Catalago>

假设您的 Web 组件是这样的：

class Catalago extends React.Component {
  render() {
    return <speical-web-stuff><speical-web-stuff>
  }
}

参见：https://reactjs.org/docs/web-components.html

Answer 2

import Catalago from './../../../assets/catalago-component'
...
render() {
   return() {
       <div>
           <Catalago //other props/>
       </div>
   }
}

Answer 3

如上所述，您应该为您的组件命名以便导入。

import Catalago from './../../../assets/catalago-component'

不过，你可能要注意一下。

以下语法期望您的组件写在文件夹 catalago-component

index.js

import Catalago from './assets/catalago-component'   //component locate in file name ```index```

import Catalago from './assets/catalago-component/customizedName.js'

该组件中使用了哪种导出类型

import Catalago from './assets/catalago-component/customizedName.js'  // exporting via ```export default``` keyword

import { Catalago } from './assets/catalago-component/customizedName.js'  //exporting via ```export``` keyword

Answer 4

在您的 webpack.config.js 中添加这一行

然后您可以在项目内的任何地方使用您的组件。

import Catalago from 'Components'

Answer 5

我导入的方式没有错，就像@tsecheukfung01在评论中说的那样是一个eslint错误。所以我将我的网络组件添加到 .eslintignore 文件中，它工作得很好。

更多忽略 eslint 错误的方法here

Answer 6

您导入组件的方式非常好。 Web 组件只不过是任何其他 HTMLElement，例如 <div> 或 <a>，这意味着这不是 React 组件，不能像这样导入和使用。

网络组件示例

export class MyComponent extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `My Webcomponent!`
  }
  
  static get tag() {
    return 'my-component';
  }
}

customElements.define(MyComponent.tag, MyComponent);

使用上面的网络组件看起来像：

import './../../../assets/MyComponent.js'
...
render() {
   return() {
       <div>
           <my-component></my-component>
       </div>
   }
}

如何正确导入 Web 组件以响应应用程序？

How to properly import a web component to react app?

web-component

reactjs