react-bootstrap表未对齐

Question

我的桌子无法对齐，有人可以帮忙吗？

我的想法是我在某处缺少.css文件，但不确定。

看起来，名称越长，列被压入的越多。

我使用npm install react-bootstrap来获取我的依赖项，除非缺少明显的东西？

我已经参考了react-bootstrap文档，并将以下内容导入了我的App.js文件，但这仍然拒绝参加。任何进一步的帮助将不胜感激。

import 'bootstrap/dist/css/bootstrap.min.css'

employees.jsx

import React, { Component } from "react";

import { Button, Table, Modal, Form } from "react-bootstrap";

class Employees extends Component {
  constructor() {
    super();
    this.state = {
      show: false
    };
  }

  handleModal() {
    this.setState({ show: true });
  }

  getTime() {
    let today = new Date();
    let time =
      today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    return time;
  }

  render() {
    return (
      <React.Fragment>
        <Table bordered responsive>
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">In</th>
              <th scope="col">Out</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{this.props.number}</td>
              <td>{this.props.name}</td>
              <td>
                <Button
                  onClick={() => {
                    this.handleModal();
                  }}
                >
                  Sign-in
                </Button>
              </td>
              <td>
                <Button>Sign-out</Button>
              </td>
            </tr>
          </tbody>
        </Table>
        <Modal show={this.state.show}>
          <Modal.Header>Sign In</Modal.Header>
          <Modal.Body>
            <Form>
              <Form.Group controlId="formBasicEmail">
                <Form.Label>User</Form.Label>
                <Form.Control type="text" placeholder="Enter username" />
              </Form.Group>
            </Form>
          </Modal.Body>
          <Modal.Footer>
            <Button>Confirm Sign-In</Button>
          </Modal.Footer>
        </Modal>
      </React.Fragment>
    );
  }
}

export default Employees;

Answer 1

您正在为每一行创建一个新表，在Employees组件中有一个表，然后为每一行创建一个子组件。

表类

class Table extends React.Component {
    constructor() {
        super();
        this.state = {
            people: [
                {
                    name: 'Archie',
                    number: 1
                },
                {
                    name: 'Someone else',
                    number: 3
                }
            ]
        };
    }

    render() {

        const rows = this.state.people.map(person => {
            return (
                <Row person={person}/>
            )
        });

        return (
            <React.Fragment>
                <Table bordered responsive>
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">In</th>
                        <th scope="col">Out</th>
                    </tr>
                    </thead>
                    <tbody>
                    {rows}
                    </tbody>
                </Table>
            </React.Fragment>
        );
    }
}

Row Class

class Row extends React.Component {
    constructor() {
        super();
        this.state = {
            show: false
        };
    }

    handleModal() {
        this.setState({ show: true });
    }

    render() {
        return (
            <React.Fragment>
                <tr>
                    <td >{this.props.person.number}</td>
                    <td>{this.props.person.name}</td>
                    <td>
                        <Button
                            onClick={() => {
                                this.handleModal();
                            }}
                        >
                            Sign-in
                        </Button>
                    </td>
                    <td>
                        <Button>Sign-out</Button>
                    </td>
                </tr>
                <Modal show={this.state.show}>
                    <Modal.Header>Sign In</Modal.Header>
                    <Modal.Body>
                        <Form>
                            <Form.Group controlId="formBasicEmail">
                                <Form.Label>User</Form.Label>
                                <Form.Control type="text" placeholder="Enter username" />
                            </Form.Group>
                        </Form>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button>Confirm Sign-In</Button>
                    </Modal.Footer>
                </Modal>
            </React.Fragment>
        );
    }
}