React 中的可重用组件

Question

我想使用 Styled-Components 在我的 React 应用程序中创建一个可重用的组件。我的问题是我得到了错误

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

请检查下面的代码：

import styled from 'styled-components'
import React from 'react'

const CustomSpinner = styled.svg`
  animation: rotate 1s linear infinite;
  width: 50px;
  height: 30px;

  & .path {
    stroke: ${(props) => props.theme.colors.black};
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }

  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes dash {
    0% {
      stroke-dasharray: 1, 150;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -35;
    }
    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -124;
    }
  }
`

export const Spinner = ({ className}) => {
  return (
    <CustomSpinner viewBox="0 0 50 50" className={className}>
      <circle className="path" cx="25" cy="25" r="20" fill="none" strokeWidth="4" />
    </CustomSpinner>
  )
}

Answer 1

只需要将export const Spinner = (...) =>改为export default (...) =>，如下所示：

export default ({ className}) => {
      return (
        <CustomSpinner viewBox="0 0 50 50" className={className}>
          <circle className="path" cx="25" cy="25" r="20" fill="none" strokeWidth="4" />
        </CustomSpinner>
      )
    }

但我建议改为这样导出，以便在导入组件时可以从代码编辑器中获得完全自动完成功能：

const Spinner = ({ className}) => {
      return (
        <CustomSpinner viewBox="0 0 50 50" className={className}>
          <circle className="path" cx="25" cy="25" r="20" fill="none" strokeWidth="4" />
        </CustomSpinner>
      )
    }

export default Spinner;

Answer 2

这与您如何导入此组件有关。

当你这样做时

export const Spinner = ({ className}) => {
  return (
    <CustomSpinner viewBox="0 0 50 50" className={className}>
      <circle className="path" cx="25" cy="25" r="20" fill="none" strokeWidth="4" />
    </CustomSpinner>
  )
}

然后你需要像这样导入它

import {Spinner} from 'path/to/Spinner

你可能会像这样导入它

import Spinner from 'path/to/Spinner'

上面这行从spinner中导入了默认导出，但是你没有默认导出，所以需要改一下你的导入，或者把你的导出改成

export default ({ className}) => {
  return (
    <CustomSpinner viewBox="0 0 50 50" className={className}>
      <circle className="path" cx="25" cy="25" r="20" fill="none" strokeWidth="4" />
    </CustomSpinner>
  )
}

改为