Как вы получаете реакцию-бутстрап для работы в реакционном сборнике

Question

Я очень новичок, чтобы отреагировать и использовал реакционный сборник для создания компонентов, чтобы научить меня взаимодействовать с пользовательским интерфейсом. Я также пытаюсь изучить реакцию-бутстрап, который рекомендуется для ответного шаблона Facebook.

Я получаю сообщение об ошибке при попытке загрузить компонент, который использует реакцию-самозагрузки

здесь есть ошибка:

Nav is not defined 
ReferenceError: Nav is not defined 
    at eval (webpack:///./src/stories/index.js?:114:9) 
    at renderMain (webpack:///./~/@kadira/storybook/dist/client/preview/render.js?:108:17) 
    at renderPreview (webpack:///./~/@kadira/storybook/dist/client/preview/render.js?:141:12) 
    at Array.renderUI (webpack:///./~/@kadira/storybook/dist/client/preview/index.js?:89:26) 
    at Object.dispatch (webpack:///./~/redux/lib/createStore.js?:186:19) 
    at ConfigApi._renderMain (webpack:///./~/@kadira/storybook/dist/client/preview/config_api.js?:48:24) 
    at render (webpack:///./~/@kadira/storybook/dist/client/preview/config_api.js?:66:17) 
    at ConfigApi.configure (webpack:///./~/@kadira/storybook/dist/client/preview/config_api.js?:91:9) 
    at Object.eval (webpack:///./.storybook/config.js?:9:26) 
    at eval (webpack:///./.storybook/config.js?:10:30) 

Вот мой config.js

import { configure } from '@kadira/storybook'; 


function loadStories() { 
    require('../src/stories'); 
} 

configure(loadStories, module); 

Вот компонент навигационной панели, называемый MenuHeader

import React from 'react'; 
import Navbar from 'react-bootstrap/lib/Navbar'; 


const Mainbar = ({}) => (
    <Navbar inverse collapseOnSelect> 
    <Navbar.Header> 
     <Navbar.Brand> 
     <a href="#">mainBar</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> 
); 

export default Mainbar; 

Вот это index.js

import React from 'react'; 
import { storiesOf, action, linkTo } from '@kadira/storybook'; 
import Button from './Button'; 
import Welcome from './Welcome'; 
import Mainbar from './MenuHeader'; 



storiesOf('Welcome', module) 
    .add('to Storybook',() => (
    <Welcome showApp={linkTo('Button')}/> 
)); 

storiesOf('Button', module) 
    .add('with text',() => (
    <Button onClick={action('clicked')}>Hello Button</Button> 
)) 
    .add('with some emoji',() => (
    <Button onClick={action('clicked')}> </Button> 
)); 

storiesOf('Mainbar', module) 
    .add('Test Navbar',() => ( <Navbar inverse collapseOnSelect> 
     <Navbar.Header> 
     <Navbar.Brand> 
      <a href="#">mainBar</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>)); 

Любая помощь будет в значительной степени быть оценены

Answer 1

Это потому, что в вашем MenuHeader компонента, Nav и NavItem компоненты не определены.

Вы можете импортировать его как.

import React from 'react'; 
import Navbar from 'react-bootstrap/lib/Navbar'; 
import Nav from 'react-bootstrap/lib/Nav'; 
import NavItem from 'react-bootstrap/lib/NavItem'; 

const Mainbar = ({}) => (

ли проверить код импорта, как я не использовал реагировать-самозагрузку