导出'Button‘(导入为'Button')在reactjs中的'./Button’中找不到

Question

希望你们都做得好，我的反应非常新，我一直在遵循指南，但是当我从'./Button‘导入{ Button}时，我被这个奇怪的问题困住了。我提供完整的代码：

import React from 'react';
import '../App.css';
import  { Button }  from './Button';
import './HeroSection.css';


function HeroSection() {
return (
<div className='hero-container'>

    <div className="hero-btns">
        <Button 
        className='btns' 
        buttonStyle='btn--outline' 
        buttonSize='btn--large'>Get Started</Button>
        <Button 
        className='btns' 
        buttonStyle='btn--primary' 
        buttonSize='btn--large'>Checkout Events
         <i className='far fa-play-circle' /></Button>
    </div>
</div>
     )
     }

export default HeroSection

这里还有一个Button.js代码：

  import React from 'react';
  import './Button.css';
  import {Link} from 'react-router-dom';

  const STYLES= ['btn--primary', 'btn--outline'];
  const SIZES= ['btn--medium', 'btn--large'];
  export const Buttom =({children, type, onClick, buttonStyle, 
  buttonSize}) => {const checkButtonStyle= 
  STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0]
  const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : 
  SIZES[0]

return(
    <Link to='/Login' className='btn-mobile'>
        <button
        className={`btn ${checkButtonStyle} ${checkButtonSize}`}
        onClick={onClick}
        type={type}
        >
            {children}
        </button>
        
        </Link>
)
  };

已经尝试放置没有{}的按钮，并且试图导出默认的Button，但是它根本没有修复它：

Answer 1

如果上面的正是您使用的Button.js文件

然后它只是一个错误，在第7行将Buttom改为Button，这样就可以了

除此之外，您还可以简单地导出默认的Button。

通过添加这一行

export default Button;

然后你就得像

import Button from './Button';

Answer 2

我用Button示例为您做了一个示例代码。

这是App.js文件

import "./styles.css";
import Button from "./Button";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Button btnText="I'm a Button" />
    </div>
  );
}

这里是Button组件。

function Button({ btnText }) {
  return (
    <div>
      <button>{btnText}</button>
    </div>
  );
}

export default Button;

这是代码框示例

下面是它的样子。

​

​