为什么我的列组件没有按预期显示？

Question

我想使用<Row> 和<Col> 组件来安排我网站上的内容。但是，内容没有按预期显示... :(

我做错了什么？

这是我的App.tsx class：

import "./App.css";
import DropdownMenu from "./components/DropdownMenu";
import TextBox from "./components/TextBox";
import { Component } from "react";
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';


interface AppProps { }

interface AppState { selectedCurrency: string }

class App extends Component<AppProps, AppState> {

  constructor(props: AppProps) {
    super(props)
    this.state = { selectedCurrency: "EUR" }
  }

  private getData = (val: any) => { this.setState({ selectedCurrency: val.value }) }

  render() {
    return (
      <div>
        <DropdownMenu sendData={this.getData} defaultValue="Currency" values={[{ label: "EUR", value: "EUR" }, { label: "GBP", value: "GBP" }, { label: "USD", value: "USD" }]} ></DropdownMenu>
        <DropdownMenu sendData={() => ""} defaultValue="Coin" values={[{ label: "Bitcoin", value: "Bitcoin" }, { label: "Etherum", value: "Etherum" }, { label: "Cardano", value: "Cardano" }, { label: "Polkadot", value: "Polkadot" }, { label: "Litecoin", value: "Litecoin" }, { label: "Enjin", value: "Enjin" }, { label: "Chilliz", value: "Chilliz" }, { label: "Vetchain", value: "Vetchain" }]} ></DropdownMenu><br></br>
        <TextBox title="Coinbase" currency={this.state.selectedCurrency} avgPrice={200} volume={10000} marketcap={21000} backgroundColor="gray" height={100} width={300}></TextBox>
        <Row>
          <Col>
            <TextBox title="Kraken" currency={this.state.selectedCurrency} avgPrice={200} volume={10000} marketcap={21000} backgroundColor="gray" height={100} width={300}></TextBox>
          </Col>
          <Col>
            <TextBox title="Kraken" currency={this.state.selectedCurrency} avgPrice={200} volume={10000} marketcap={21000} backgroundColor="gray" height={100} width={300}></TextBox>
          </Col>
        </Row>
// NEW LINES START
        <Container>
          <Row>
            <Col>1 of 2</Col>
            <Col>2 of 2</Col>
          </Row>
        </Container>
// NEW LINES END
      </div >
    );
  }
}
export default App;

结果如下： Output in my browser

Answer 1

我认为问题在于<Col> 的宽度属性是<Row> 之一。 通常，当您忘记 <Container> 时会发生这种情况。

试试这个：

<Container>
  <Row>
    <Col>1 of 1</Col>
  </Row>
</Container>

所以你的代码应该是这样的：

render() {
    return (
        <Container>
            <DropdownMenu sendData={this.getData} defaultValue="Currency" values={[{ label: "EUR", value: "EUR" }, { label: "GBP", value: "GBP" }, { label: "USD", value: "USD" }]} ></DropdownMenu>
            <DropdownMenu sendData={() => ""} defaultValue="Coin" values={[{ label: "Bitcoin", value: "Bitcoin" }, { label: "Etherum", value: "Etherum" }, { label: "Cardano", value: "Cardano" }, { label: "Polkadot", value: "Polkadot" }, { label: "Litecoin", value: "Litecoin" }, { label: "Enjin", value: "Enjin" }, { label: "Chilliz", value: "Chilliz" }, { label: "Vetchain", value: "Vetchain" }]} ></DropdownMenu><br></br>
            <TextBox title="Coinbase" currency={this.state.selectedCurrency} avgPrice={200} volume={10000} marketcap={21000} backgroundColor="gray" height={100} width={300}></TextBox>
            <Row>
                <Col>
                    <TextBox title="Kraken" currency={this.state.selectedCurrency} avgPrice={200} volume={10000} marketcap={21000} backgroundColor="gray" height={100} width={300}></TextBox>
                </Col>
                <Col>
                    <TextBox title="Kraken" currency={this.state.selectedCurrency} avgPrice={200} volume={10000} marketcap={21000} backgroundColor="gray" height={100} width={300}></TextBox>
                </Col>
            </Row>
        </Container>
    );
}
}