React-bootstrap - 无效的挂钩调用 - ButtonDropdown

我是 React 和 JS 的新手,正在尝试为我的 CRUD SpringBoot 应用程序实现一个 React 前端。我正在尝试将 ButtonDropdown 添加到我的一个页面。


这是代码:


通用buttondrop.js


import React, { Component, useState } from 'react';

import { ButtonDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap';

import Dropdown from 'react-bootstrap/Dropdown';

import DropdownButton from 'react-bootstrap/DropdownButton';


const Bdrop = (props) => {

  const [dropdownOpen, setOpen] = useState(false);


  const toggle = () => setOpen(!dropdownOpen);


  return (

    <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>

      <DropdownToggle caret>

        Button Dropdown

      </DropdownToggle>

      <DropdownMenu>

            <Dropdown.Item href="#/action-1">Action</Dropdown.Item>

            <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>

            <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>

      </DropdownMenu>

    </ButtonDropdown>

  );

}


应用程序.js


import React, { Component } from 'react';

import './App.css';

import Home from './Home';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import CustomerList from './CustomerList';

import EmployeeList from './EmployeeList';

import CustomerEdit from './CustomerEdit';

import EmployeeEdit from './EmployeeEdit';

import SessionList from './SessionList';

import Bdrop from './buttondrop';



class App extends Component {

  render() {

    return (

      <Router>

        <Switch>

          <Route path='/' exact={true} component={Home}/>

          <Route path='/customers' exact={true} component={CustomerList}/>

          <Route path='/customer/:id' component={CustomerEdit}/>

          <Route path='/employees' exact={true} component={EmployeeList}/>

          <Route path='/employee/:id' component={EmployeeEdit}/>

          <Route path='/sessions' exact={true} component={SessionList}/>

          <Route path='/buttondrop' component={() => <Bdrop /> }/>



        </Switch>

      </Router>

    )

  }

}



墨色风雨
浏览 118回答 1
1回答

qq_遁去的一_1

这是一个带有工作组件的版本的沙盒链接。<Bdrop />在不知道您正在使用的 Bootstrap、react-bootstrap 和 reactstrap 的版本的情况下,很难说这是否是导致您出现问题的原因。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript