Question

我只是想了解反应组件。

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

我只是想让一个导航栏组件显示在Create-React-App Boilerplate的测试页面上。

这是我的包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;

添加import { Navbar, Nav, NavItem } from 'react-bootstrap'并创建菜单栏组件后，我收到此错误：

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有关，但是如果我删除了所有我添加的测试页面正确呈现。

我毫不怀疑这很简单，但我看不到它。任何帮助都会得到很好的了解

Answer 1

您正试图解决Link1组件中Link2中props，MenuBar的问题。尝试将这些道具传递给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.
}

Answer 2

以下是我如何使用它：

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;

将react-bootrap组件导入FB Create-React-App Boilerplate后出现JSON错误

2 个答案: