Question

您好，我刚刚开始在项目中使用styled-components。我的工作环境是：

1）npm version 6.12

2）Node.js version 12.13

3）VS Code

从official documentation安装styled-components后：

sudo npm install --save styled-components

我的项目不再编译并引发以下错误：

错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（用于复合组件），但得到：目的。您可能忘记了从文件中导出组件定义，否则您可能混淆了默认导入和命名导入。

检查Home的呈现方法。

我到目前为止所做的事情：

1）根据调试器的建议，我仔细检查了Home page并尝试查看是否忘记了import该组件。但是，它已正确导入，但仍然无法正常工作。

2）总是按照调试器的建议，我检查是否存在无效的type元素。但是我认为语法是正确的。为确保这一点，我就如何正确引用这些类型的组件咨询了official documentation。不幸的是，它也不起作用。

3）经过更多研究，我发现了this useful post。看来这可能是由于对include的引用不精确所致。但是，在安装styled-components之前，我的项目可以正常工作/编译/构建。我所做的所有import/export都以相同的方式进行。

我在出现错误的地方提供了以下代码片段：

StyledHero.js

import styled from "styled-components"

const SimpleButton = styled.button`
    color:red;
    background:green;
`;

export default SimpleButton;

Home.js

import React from 'react'
import Hero from "../components/Hero"
import Banner from "../components/Banner"

import {Link} from "react-router-dom"
import Services from "../components/Services"
import FeaturedVessel from "../components/FeaturedVessels"

import Button from "../components/StyledHero"

export default function Home () {
    return (
      <>
        <Hero hero="defaultHero">
          <Banner title="Vessels" subtitle="Currently Tracked Vessels">
            <Link to="/vessels" className="btn-primary">
                Vessels
            </Link>
          </Banner>
        </Hero>
        <Services />
        <FeaturedVessel />
        <Button>hello</Button>
      </>
    );
}

我尝试过的其他选项：

作为尝试解决该问题的最后注解，我认为使用styled-components创建的组件应该以相同的名称导出，因此我也尝试使用组件的确切名称导出它在StyledHero.js内部创建：

StyledHero.js

import styled from "styled-components"

const SimpleButton = styled.button`
  color:red;
  background:green;
`;

export default SimpleButton;

Home.js

import React from 'react'
import Hero from "../components/Hero"
import Banner from "../components/Banner"

import {Link} from "react-router-dom"
import Services from "../components/Services"
import FeaturedVessel from "../components/FeaturedVessels"

import SimpleButton from "../components/StyledHero"

export default function Home () {
    return (
      <>
        <Hero hero="defaultHero">
          <Banner title="Vessels" subtitle="Currently Tracked Vessels">
            <Link to="/vessels" className="btn-primary">
                Vessels
            </Link>
          </Banner>
        </Hero>
        <Services />
        <FeaturedVessel />
        <SimpleButton>hello</SimpleButton>
      </>
    );
}

如果在我的package.json下有用：

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-icons": "^3.8.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "styled-components": "^5.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

有人可以指出正确的方向并理解问题所在吗？

HTML-样式组件：错误：元素类型无效：预期为字符串或类/函数，但得到：对象

0 个答案: