Question

我有一个 catalago-component.js，它是一个 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

但是每次我运行我的反应应用程序时我都会收到这个错误

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：使用 react + 网络组件 https://codesandbox.io/s/hopeful-cohen-ut6mv?file=/src/App.js

链接到代码沙盒

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'

但是，您可能会注意。

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

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 错误。所以我将我的 web 组件添加到 .eslintignore 文件中，它工作得很好。

更多忽略 eslint 错误的方法 here

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

5 个答案: