реакция- bootstrap таблица не выровнена

Question

Моя таблица не выровняется , кто-нибудь может помочь?

Я думал, что мне не хватает файла. css, но я не уверен.

Похоже, чем длиннее имя, тем больше толкаются столбцы.

Я использовал npm install response- bootstrap для получения своих зависимостей, если я не пропустил что-то очевидное?

Я сослался на документацию реагировать bootstrap и импортировал ниже в моем файле приложения. js, но он все еще отказывается играть в мяч. Буду признателен за любую дополнительную помощь.

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

employee.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>
        );
    }
}

Класс строки

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>
        );
    }
}