Question

这是第一次使用React Js构建Web应用程序。我正在尝试使用＆＃39; react-bootstrap＆＃39;来构建一个导航栏。我收到以下错误。

./src/components/Navbar.js
Line 7:   'React' must be in scope when using JSX  react/react-in-jsx-scope
Line 8:   'React' must be in scope when using JSX  react/react-in-jsx-scope
Line 9:   'React' must be in scope when using JSX  react/react-in-jsx-scope
Line 10:  'React' must be in scope when using JSX  react/react-in-jsx-scope
Line 11:  'React' must be in scope when using JSX  react/react-in-jsx-scope
Line 13:  'React' must be in scope when using JSX  react/react-in-jsx-scope

搜索关键字以了解有关每个错误的详情。

我正在使用create-react-app而我还没有配置webpack.config.js。我正在使用默认配置。

我为组件创建了一个新文件夹，并且我有两个js文件 Navbar.js Hero.js

我的App.js中的代码如下：

import React, { Component } from 'react';
import Navbar from './components/Navbar';
import Hero from './components/Hero';

class App extends Component {
 render() {
  return (
   <div className="App">
     <Navbar />
      <Hero />
   </div>
  );
 }
}

导出默认App;

我在index.js文件中导入bootstrap为

import 'bootstrap/dist/css/bootstrap.css';

Navbar.js代码如下：

import react, {Component} from 'react';
import {Grid, Navbar} from 'react-bootstrap';

export default class Navbar extends Component {
 render() {
  return (
    <Navbar inverse fixedTop>
      <Grid>
        <Navbar.Header>
          <Navbar.Brand>
            <a href="/">Royal Goat Farm></a>
          </Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>
      </Grid>
    </Navbar>
   );
  }
 }

我做错了什么？我试过谷歌但找不到任何帮助。

＆＃39;阵营＆＃39;使用JSX react / react-in-jsx-scope

0 个答案: