你如何使反应引导在反应故事书中发挥作用？

Question

我是非常新的反应，并一直使用反应故事书，以建立组件，教我自己的反应UI。我也在尝试学习react引导，这是推荐的样板。

当我试图加载一个使用react引导的组件时，我得到了一个错误。

以下是错误：

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 = ({}) => (

检查导入代码，因为我还没有使用react引导程序。