你如何让反应引导在反应故事书中工作

Question

我对反应很陌生，一直在使用 react-storybook 来构建组件来自学 react UI。 我也在尝试学习 react-bootstrap，这是推荐用于 react 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)

这是我的配置.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;

这是索引.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 = ({}) => (

请检查导入代码，因为我没有使用反应引导程序