React 中的可重用组件

Posted 2023-03-15

【中文标题】React 中的可重用组件

【英文标题】：Reusable Component in React

【发布时间】：2021-10-01 14:01:25

【问题描述】：

我想使用 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>
  )

【参考方案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;

【参考方案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>
  )

改为

【讨论】：

另外，您可能只想使用 ...props 而不是将 className 作为道具，然后您可以传入样式和其他任何内容，而不必担心 codesandbox.io/s/heuristic-violet-skhp0?file=/src/App.js