私は現在、ReactとReact-Bootstrapを学ぼうとしています。
React-Bootstrapグリッドレイアウトをうまく活用しようとしています。間違って実装しているかどうかはわかりません。私の知る限り、「コンテナー、列、行」機能がまったく機能していないため、不適切なバージョンをどこかで使用しているようです。
問題は何でしょうか?アイデアが足りません。
Package.jsonのバージョン:
"dependencies": {
"bootstrap": "^4.3.1",
"jquery": "^3.0.0",
"react": "^16.8.4",
"react-bootstrap": "^1.0.0-beta.6",
"react-dom": "^16.8.4",
"react-scripts": "2.1.8",
"TypeScript": "^3.3.4000"
「bootstrap」ディレクトリのpackage.json:
"_from": "bootstrap@latest",
"_id": "[email protected]",
「react-bootstrap」ディレクトリのpackage.json:
"_from": "react-bootstrap@^1.0.0-beta.6",
"_id": "[email protected]",
私もbootstrap@3
のインストールと使用を試みましたが、うまくいきませんでした。
npm install bootstrap@3 --save
npm i --save bootstrap@3
Index.jsからの主要なスニペット:
import React from 'react';
import ReactDOM from 'react-dom';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
class Module extends React.Component
{
constructor(props)
{
super(props);
}
clickHandler = (command) =>
{
// ... some handler code here
}
render()
{
return (
<Container>
<Row>
<Col>
<table>
<tr>
<th class="r1_header"> Header 1 </th>
<th class="r1_header"> Header 2 </th>
<th class="r1_header"> Header 3 </th>
</tr>
<tr>
<td> <button/> </td> // some more button stuff here
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<th class="r2_header"> Header 1 </th>
<th class="r2_header"> Header 2 </th>
<th class="r2_header"> Header 3 </th>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
</table>
</Col>
<Col>
// another table here... should be aligned next to the
// prev "col" horizontally but is going underneath (vertically)
</Col>
</Row>
</Container>
);
}
}
*更新*
これがMCVEです...
表示されるテキストはHelloWorld
である必要がありますが、代わりに次のようになります。
Hello
World
私は問題を解決しました。それは私の側のミスステップでした。 スタイルシート に関して、react-bootstrapメインで説明されている設定の重要な部分を逃しました。
index.html
最新のbootstrapスタイルシートへのパスをコピーして貼り付けます:
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
グリッドを使用して、テーブルに指定する列の数と、12以外の他のものに保持する列の数を指定できます。
以下のコードのように。
グリッド、行、列のインポート
import { Row, Col, Grid } from 'react-bootstrap';
<Grid>
<Row>
<Col md="6">
<table>
<tr>
<th class="r1_header"> Header 1 </th>
<th class="r1_header"> Header 2 </th>
<th class="r1_header"> Header 3 </th>
</tr>
<tr>
<td> <button /> </td> // some more button stuff here
<td> <button /> </td>
<td> <button /> </td>
</tr>
<tr>
<td> <button /> </td>
<td> <button /> </td>
<td> <button /> </td>
</tr>
<tr>
<td> <button /> </td>
<td> <button /> </td>
<td> <button /> </td>
</tr>
<tr>
<th class="r2_header"> Header 1 </th>
<th class="r2_header"> Header 2 </th>
<th class="r2_header"> Header 3 </th>
</tr>
<tr>
<td> <button /> </td>
<td> <button /> </td>
<td> <button /> </td>
</tr>
<tr>
<td> <button /> </td>
<td> <button /> </td>
<td> <button /> </td>
</tr>
<tr>
<td> <button /> </td>
<td> <button /> </td>
<td> <button /> </td>
</tr>
</table>
</Col>
<Col md="6">
{"dsfdsdsf"}
</Col>
</Row>
</Grid>
Index.jsファイルにimport 'bootstrap/dist/css/bootstrap.min.css';
を追加することもできます。必ずnpm install bootstrap
にしてください。
反応ドキュメントによると、最初にbootstrap=をインストールする必要があります
npm install反応ブートストラップブートストラップ
次に、この行をindex.jsまたはApp.jsにインポートする必要があります
import 'bootstrap/dist/css/bootstrap.min.css';
次に、このようにコンポーネントにインポートできますimport { Container, Row, Col } from 'react-bootstrap';
そして、このように使用します
<Container>
<Row>
<Col>1</Col>
<Col>2</Col>
<Col>3</Col>
</Row>
</Container>