Javascript React引导-无效的挂钩调用

我使用

Bootstrap

和

ReactJS

来学习后者

我想在我的应用程序中显示引导导航栏

我的代码如下：

app.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from "react-bootstrap";

function App() {
  return (
    <div className="App">

      <Navbar bg="dark" variant="dark">
        <Navbar.Brand href="#home">
          <img
            alt=""
            src="####"
            width="30"
            height="30"
            className="d-inline-block align-top"
          />
        // {' React Bootstrap'}
        </Navbar.Brand>
      </Navbar>

    </div>
  );
}

export default App;

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

正如注释中所建议的，如果我运行

npm ls react dom

我会得到以下结果：

myapp-frontend@0.1.0 /Desktop/myapp-frontend
└── react-dom@16.10.2

---

你能从你的代码中删除这个吗

//{'React Bootstrap'}

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from "react-bootstrap";

function App() {
  return (
    <div className="App">

      <Navbar bg="dark" variant="dark">
        <Navbar.Brand href="#home">
          <img
            alt=""
            src="####"
            width="30"
            height="30"
            className="d-inline-block align-top"
          />
        </Navbar.Brand>
      </Navbar>

    </div>
  );
}

export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“react bootstrap”导入{Navbar}；
函数App（）{
返回(
);
}
导出默认应用程序；

---

我认为错误来自这一行

不是不同版本的

react

，而是

react dom

。运行

npm ls react dom

进行验证。它必须是

=16.8.0

，并且应该与您的

react

版本相匹配。谢谢，我还有一个版本：

myapp-frontend@0.1.0myapp前端└── 反应-dom@16.10.2

您从哪里得到此错误？你能发布错误的完整堆栈跟踪吗？它会指出抛出错误的原因吗？正如错误已经指出的那样，你只能在功能组件内部使用钩子，而不能在类组件内部使用钩子。我启动了一个新的react应用程序，并将您看到的代码添加到其中。因此它里面没有其他代码。你能试着删除Navbar.Brand标签吗？如果这不起作用，你能在github中为我共享你的代码吗？

myapp-frontend@0.1.0 /Desktop/myapp-frontend
└── react-dom@16.10.2

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from "react-bootstrap";

function App() {
  return (
    <div className="App">

      <Navbar bg="dark" variant="dark">
        <Navbar.Brand href="#home">
          <img
            alt=""
            src="####"
            width="30"
            height="30"
            className="d-inline-block align-top"
          />
        </Navbar.Brand>
      </Navbar>

    </div>
  );
}

export default App;