web-dev-qa-db-de.com

Warum werden meine React Bootstrap Glyphicons nicht angezeigt?

Ich verwende React Bootstraps Glyphicon -Komponente, aber keines der Glyphicons wird angezeigt. Hier ist mein Code:

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Global from './components/Global';

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

Global.js

import React, { Component } from 'react';
import { FormGroup, FormControl, InputGroup, Glyphicon } from 'react-bootstrap';

class Global extends Component {
    render() {
        return(
          <div>
            <h2> Book Explorer!</h2>
              <FormGroup>
              <InputGroup>
                <FormControl
                  type="text"
                  placeholder="Search for a book"
                />
              <InputGroup.Addon>
                <Glyphicon glyph="search"></Glyphicon>
              </InputGroup.Addon>
            </InputGroup>
            </FormGroup>
          </div>
        )
    }
}

export default Global;

Hier ist meins package.json Datei:

{
  "name": "setup",
  "version": "1.0.0",
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  },
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-polyfill": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.24.1",
    "react": "^15.5.4",
    "react-bootstrap": "^0.31.0",
    "react-dom": "^15.5.4",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}
13
Peter Tran

Dies liegt daran, dass Bootstrap verwendet die Schriftart Gylphicon Halflings, um die Glyphicons anzuzeigen. Das CSS von Bootstrap muss explizit enthalten sein, da es die Glyphicons importiert. Andernfalls werden die Glyphicons nicht angezeigt. Sie könnten das bootstrap.min.css In Ihre index.html Datei, die es für Sie importiert:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

Es gab ein Problem auf GitHub in Bezug auf genau dieses Problem. Es wird nicht ausdrücklich gesagt, dass Sie Bootstraps CSS einbinden müssen, und ich bin bereits auf dieses Problem gestoßen. Sie müssen die CSS-Datei einschließen, da sonst die Glyphicons nicht importiert werden und Ihre Komponenten nichts anzeigen.

20
Li357

Ich glaube, der React-Bootstrap enthält nicht die Glyphicons-Komponente. (Ich habe die Komponenten dort überprüft: https://react-bootstrap.github.io/components/alerts/ )

Sie müssten also Glyphicons über dem Paket "react-bootstrap" hinzufügen:

Fügen Sie in der Datei index.html die folgende Zeile hinzu:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Dies sollte das Problem lösen, ohne das ganze bootstrap css.

0
Steven Luong C