javascript - react-bootstrap 表未对齐
问题描述
我的表不对齐,有人可以帮忙吗?
我的想法是我在某处缺少一个 .css 文件,但我不确定。
看起来名称越长,列越多。
我使用 npm install react-bootstrap 来获取我的依赖项,除非我遗漏了一些明显的东西?
我已经参考了 react-bootstrap 文档并在我的 App.js 文件中导入了以下内容,但这仍然拒绝玩球。任何进一步的帮助将不胜感激。
import 'bootstrap/dist/css/bootstrap.min.css'
员工.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;
解决方案
您正在为每一行创建一个新表,在员工组件中有一个表,然后为每一行创建一个子组件。
表类
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>
);
}
}