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

Question

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