Question

我开发了一个react应用程序，因为我通过命令添加了react bootstrap，但是当我在代码中使用按钮组件时，编译器给出了错误。

我正在寻找解决方案。实际上，当时我在术语页面中执行导入按钮时，编译器给出了错误。我想在条款页面添加按钮。

我尝试了以下两种不同的方式：

import { Button } from 'react-bootstrap';

和

import ReactBootstrap, { Jumbotron, Button, Col, Grid, Panel, FormGroup } from 'react-bootstrap';
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-bootstrap';


const Terms = () => (<div >
  <p > Terms and conditions content here. </p>
  <ButtonToolbar>
    <Button variant="primary" > Primary </Button>
    <Button variant="secondary" > Secondary </Button>
    <Button variant="success" > Success </Button>
    <Button variant="warning" > Warning </Button>
    <Button variant="danger" > Danger </Button>
    <Button variant="info" > Info </Button>
    <Button variant="light" > Light </Button>
    <Button variant="dark" > Dark </Button>
    <Button variant="link" > Link </Button>
  </ButtonToolbar>
</div>
);

export default Terms;

Answer 1

您需要导入ButtonToolbar，

import {ButtonToolbar} from 'react-bootstrap';

注意：，您应该只导入任何需要的内容，因为不需要使用代码段Jumbotron, Col, Grid, Panel, FormGroup（除非在某处使用了它，并且未显示出仅突出显示问题）。

此外，我不认为react-bootstrap在您导入时有叫ReactBootstrap的副词。

“ ButtonToolbar”未定义react / jsx-no-undef

1 个答案: