[英]React-Bootstrap not working on components
我刚开始一个新的 react 应用程序并想实现 react-bootstrap(通过运行 npm install react-bootstrap bootstrap 来实现)Column、Row 和 Button 标签不起作用,并且 react-bootstrap 文件夹存在于 node-modules 文件夹中.
import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import {Button, Col} from 'react-bootstrap';
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return(
<Container fluid>
<Row>
<Col>
hi
</Col>
<Col>
bye
</Col>
</Row>
<Button variant='primary'>hi</Button>
</Container>
)
}
}
export default App;
您需要导入引导程序。
添加以下内容以导入引导程序。 根据您的文件夹结构,相对路径可能会有所不同。
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
然后引导程序将可用于您的 App 组件及其所有子组件。
import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import { Button, Col } from "react-bootstrap";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
class App extends React.Component {
render() {
return (
<Container fluid>
<Row>
<Col>hi</Col>
<Col>bye</Col>
</Row>
<Button variant="primary">hi</Button>
</Container>
);
}
}
export default App;
另一种选择是在您的 index.js 中导入 bootstrap,它将对您的所有组件可用。
import React from "react";
import ReactDOM from "react-dom";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.