Question

我很反应并且一直在使用react-storybook构建组件来教我自己反应UI。我也在尝试学习反应引导程序，建议用于反应Facebook样板。

当我尝试加载使用react-bootstrap

的组件时出现错误

这是错误：

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-bootstrap

你如何让react-bootstrap在react-storybook中工作

1 个答案: