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"
}
}
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.
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.