捕获TypeError：Object（...）不是Bootstrap的ThemeProvider.js中的函数

Question

Ran“> npm install react-bootstrap bootstrap”

从Bootstrap导入了按钮组件，并将其添加到页面中。我收到以下错误。

我的package.json在下面具有用于引导的条目以及用于响应的其他条目。

"react-bootstrap": "^1.0.0-beta.14",
"bootstrap": "^4.3.1",

import React, { Component } from 'react';
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
import ToggleButton from 'react-bootstrap/ToggleButton';

class MyButtonComponent extends Component {

    render() {
        let value  =1;
        return (

           <ToggleButtonGroup type="checkbox" value={value} >
             <ToggleButton value={1}>Option 1</ToggleButton>
             <ToggleButton value={2}>Option 2</ToggleButton>
             <ToggleButton value={3}>Option 3</ToggleButton>
           </ToggleButtonGroup>

        );
    }
}

export default MyButtonComponent ;

---

错误日志

ThemeProvider.js:29 Uncaught TypeError: Object(...) is not a function
    at useBootstrapPrefix (VM106126 ThemeProvider.js:29)
    at eval (VM106134 ButtonGroup.js:29)
    at updateForwardRef (VM105779 react-dom.development.js:13046)
    at beginWork (VM105779 react-dom.development.js:13837)
    at performUnitOfWork (VM105779 react-dom.development.js:15864)
    at workLoop (VM105779 react-dom.development.js:15903)
    at HTMLUnknownElement.callCallback (VM105779 react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (VM105779 react-dom.development.js:138)
    at invokeGuardedCallback (VM105779 react-dom.development.js:187)
    at replayUnitOfWork (VM105779 react-dom.development.js:15311)

Answer 1

我在您的代码中没有看到任何错误，因此我在代码沙箱上进行了尝试，并且正确获取了输出，该错误可能是由其他组件引起的：

import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup";
import ToggleButton from "react-bootstrap/ToggleButton";

class MyButtonComponent extends Component {
  render() {
    let value = 1;
    return (
      <ToggleButtonGroup type="checkbox" value={value}>
        <ToggleButton value={1}>Option 1</ToggleButton>
        <ToggleButton value={2}>Option 2</ToggleButton>
        <ToggleButton value={3}>Option 3</ToggleButton>
      </ToggleButtonGroup>
    );
  }
}

export default MyButtonComponent;

这是输出：

这是CodeSandBox示例的链接：https://codesandbox.io/s/boring-leaf-xj8ix

Answer 2

self具有对react和react dom的peerDependency，并且需要支持钩子的版本React bootstrap v1.0.0-beta.14，这就是您收到此错误的原因

>=16.8.0

您可以将react和react-dom版本从16.4.0升级到16.8.0或用于解决上述错误的最新版本