Facebook 将react bootsrap组件导入FB Create react App样板文件后出现JSON错误

我只是想了解react组件

我知道我做错了什么，但我不知道是什么

我只是想在CreateReact应用程序样板的测试页面上显示一个导航栏组件

这是我的JSON包：

 {
  "name": "Test_WebSite",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.8.4"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-bootstrap": "^0.30.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  }
  // ...
  "eslintConfig": {
    "extends": "react-app"
  },
}

这是我的App.js：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar, Nav, NavItem } from 'react-bootstrap';

const MenuBar =({name, Link1, Link2})=>(

<Navbar inverse collapseOnSelect>
  <Navbar.Header>
    <Navbar.Brand>
      <a href="#">{name}</a>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1} href="#">{Link1}</NavItem>
      <NavItem eventKey={2} href="#">{Link2}</NavItem>
    </Nav>
  </Navbar.Collapse>
</Navbar>
);



class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div>
          <MenuBar name="WTF"/>
        </div>

      </div>
    );
  }
}

export default App;

从“react bootstrap”添加

import{Navbar，Nav，NavItem}并创建菜单栏组件后，出现以下错误：

Failed to compile.

Error in ./src/App.js
Module not found: Syntax/Volumes/Main Drive/Test_WebSite/package.json (directory description file): SyntaxError: Unexpected token } in JSON at position 411

 @ ./src/App.js 21:22-48

我不认为它与JSON有关，因为如果我删除我添加的所有内容，测试页面将正确呈现

我毫不怀疑这是件简单的事，但我看不出来。如果您试图从
菜单栏
组件中的
道具
中解析
Link1
，
Link2
，我们将非常感谢您提供的任何帮助。尝试将这些道具传递到
MenuBar
组件

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar, Nav, NavItem } from 'react-bootstrap';

const MenuBar =({name, Link1, Link2})=>(

<Navbar inverse collapseOnSelect>
  <Navbar.Header>
    <Navbar.Brand>
      <a href="#">{name}</a>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1} href="#">{Link1}</NavItem>
      <NavItem eventKey={2} href="#">{Link2}</NavItem>
    </Nav>
  </Navbar.Collapse>
</Navbar>
);



class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div>
          <MenuBar name="WTF" Link1="abc" Link2="xyz"/>
        </div>

      </div>
    );
  }
}

export default App;

Package.json

 {
  "name": "Test_WebSite",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.8.4"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-bootstrap": "^0.30.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
   // }                     <<<<<<< Extra Curly brace was here causing an issue
  // ...
  "eslintConfig": {
    "extends": "react-app"
  },           <<<<<<<<<< dont need a comman here as this is the last entry, remove it.
}

{
“名称”：“测试网站”，
“版本”：“0.1.0”，
“私人”：没错，
“依赖性”：{
“反应脚本”：“0.8.4”
},
“依赖项”：{
“反应”：“^15.4.1”，
“react dom”：“^15.4.1”，
“反应引导”：“^0.30.7”
},
“脚本”：{
“开始”：“反应脚本开始”，
“构建”：“反应脚本构建”，
“测试”：“反应脚本测试--env=jsdom”，
“弹出”：“反应脚本弹出”
},
//}以下是我如何让它工作的：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import bootstrap from 'bootstrap/dist/css/bootstrap.css' //<< added this css file
import { Navbar, Nav, NavItem } from 'react-bootstrap';

const MenuBar =({Name, Link1, Link2})=>(
<Navbar inverse collapseOnSelect>
  <Navbar.Header>
    <Navbar.Brand>
      <a href="#">{Name}</a>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1} href="#">{Link1}</NavItem>
      <NavItem eventKey={2} href="#">{Link2}</NavItem>
    </Nav>
  </Navbar.Collapse>
</Navbar>
);


class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div>
          <MenuBar Name="Am I a Fool" Link1="Foo" Link2="Bar" />
        </div>
      </div>
    );
  }
}

export default App;

@DT90我认为在youir package.json中有一个额外的
}
，这可能是导致此问题的语法错误导致错误更改，或者您得到相同的错误。还要检查package.jsonIt中是否存在任何其他语法错误。这确实令人沮丧。如果我删除了它呈现的所有内容，但一旦我添加了任何与react bootstrap相关的内容，我就会收到JSON错误。删除大括号没有产生任何影响。我解决了这个问题。我npm引导以及反应引导。我导入了引导css，这似乎解决了这个问题