React bootstrap - 无效的钩子调用

Question

React bootstrap - 无效的钩子调用

FBS*_*BSO 6 javascript ecmascript-6 reactjs react-bootstrap

我正在使用BootstrapwithReactJS来学习后者。

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

我的代码如下：

应用程序.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;

Run Code Online (Sandbox Code Playgroud)

索引.html

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
    integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
    crossorigin="anonymous">
    <!-- BOOTSTRAP -->
    <link rel="apple-touch-icon" href="logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>My app</title>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
    crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" 
    integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" 
    crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" 
    integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" 
    crossorigin="anonymous"></script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

索引.js

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'));

Run Code Online (Sandbox Code Playgroud)

但我得到：

无效的钩子调用。Hooks 只能在函数组件内部调用

我做了一些研究，人们认为错误是由不同版本的 React 引起的。所以我运行，npm ls react但我只有一个版本：

myapp-frontend@0.1.0 /Desktop/myapp-frontend
??? react@16.10.2

Run Code Online (Sandbox Code Playgroud)

正如评论中所建议的，如果我运行，npm ls react-dom我会得到这个：

myapp-frontend@0.1.0 /Desktop/myapp-frontend
??? react-dom@16.10.2

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ton*_*Ngo 0

您可以将其从代码中删除吗

// {'反应引导'}

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;

Run Code Online (Sandbox Code Playgroud)

我认为错误来自该行

归档时间：	6 年，10 月前
查看次数：	2093 次
最近记录：	6 年，8 月前