为什么我的按钮无法在 localhost.3000 上呈现？答案

【问题标题】：Why can't my button render on loacalhost.3000?为什么我的按钮无法在 localhost.3000 上呈现？
【发布时间】：2021-09-05 15:54:57
【问题描述】：

我的按钮无法编译，错误是："./src/components/Button.js 第 2 行：使用 JSX react/react-in-jsx-scope 时，'React' 必须在作用域内。有人知道问题所在吗？请帮忙！谢谢！

"这是我的 Header.js:

import PropTypes from 'prop-types';
import Button from './Button'
const Header = ({title}) => {
    return (
        <header className="header">
            
            <h1>{title}</h1>
            <Button />
            
        </header>
            )
        }
        Header.defaultProps ={
          title:'Task Tracker  '  
        }
        Header.propTypes={
            title:PropTypes.string.isRequired,
        }
// css in js
       // const headingStyle = {
           // color:'red', 
           // backgroundColor:'blue'
       // }
export default Header

这是我的 Button.js：

const Button = () => {
    return <button className="btn">Add</button>
}
export default Button

我的 Header.js 和 Button.js 在我的 src 文件夹中的 components 文件夹中

这也是我的 src 文件夹中的 index.css：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
}

.container {
  max-width: 500px;
  margin: 30px auto;
  overflow: auto;
  min-height: 300px;
  border: 1px solid steelblue;
  padding: 30px;
  border-radius: 5px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.btn {
  display: inline-block;
  background: #000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  font-family: inherit;
}

.btn:focus {
  outline: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn-block {
  display: block;
  width: 100%;
}

.task {
  background: #f4f4f4;
  margin: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

.task.reminder {
  border-left: 5px solid green;
}

.task h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add-form {
  margin-bottom: 40px;
}

.form-control {
  margin: 20px 0;
}

.form-control label {
  display: block;
}

.form-control input {
  width: 100%;
  height: 40px;
  margin: 5px;
  padding: 3px 7px;
  font-size: 17px;
}

.form-control-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-control-check label {
  flex: 1;
}

.form-control-check input {
  flex: 2;
  height: 20px;
}

footer {
  margin-top: 30px;
  text-align: center;
}

【问题讨论】：

使用功能组件时需要导入React。将此添加到文档的顶部。从“反应”导入反应；
是的，我在其他文件上导入 React。有用。谢谢你们！

标签： css reactjs button scope

【解决方案1】：

试试这个代码：

export const Button = () => {
    return <button className="btn">Add</button>
}

import {Button} from './Button'

【讨论】：

【解决方案2】：

补充 Vuk Vucic 评论： Vucic 提到在使用函数式组件时需要导入 React，但从 React 17（如果使用 babel 编译）开始，不再需要最重要的 import React from 'react'。您现在只需要导入特定于反应的钩子 like import { useEffect() } from 'react'; 但是，如果它不是通过 Babel 编译的，则需要导入 React。

在这种情况下，您似乎确实需要import React from 'react';

有用的文章 https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

【讨论】：