Question

我是新手对js做出反应，我在向表中添加一些组件时遇到了一些问题。对于一些有经验的人来说应该很容易。

这是我的表 - 它来自Material UI：

const styles = theme => ({
    root: {
        width: '100%',
        marginTop: theme.spacing.unit * 3,
        overflowX: 'auto',
    },
    table: {
        minWidth: 700,
    },
});


let id = 0;

function createData(name, lastName, location, email, status, role) {
    id += 1;
    return {id, name, lastName, location, email, status, role};
}

const data = [
    createData("Jan", "Mucha", "Kraków ", "first@mail", "remote", "admin"),
    createData("Ewa", "Mucha", "Kraków ", "first@mail", "remote", "admin"),
    createData("Maciej", "Mucha", "Kraków ", "first@mail", "remote", "admin"),
    createData("Ula", "Mucha", "Kraków ", "first@mail", "remote", "admin"),
    createData("Iza", "Mucha", "Kraków ", "first@mail", "remote", "admin"),
];

function NextPersonTable(props) {
    const {classes} = props;

    return (
        <Paper className={classes.root}>
            <Table className={classes.table}>
                <TableHead>
                    <TableRow>
                        <TableCell className={classes.head}>ID:</TableCell>
                        <TableCell className={classes.head} numeric>Name:</TableCell>
                        <TableCell className={classes.head} numeric>Last Name</TableCell>
                        <TableCell className={classes.head} numeric>Location</TableCell>
                        <TableCell className={classes.head} numeric>Email</TableCell>
                        <TableCell className={classes.head} numeric>Status</TableCell>
                        <TableCell className={classes.head} numeric>Role</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {data.map(n => {
                        return (
                            <TableRow key={n.id}>
                                <TableCell className={classes.innerRow} component="th" scope="row">
                                    {n.id}
                                </TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.name}</TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.lastName}</TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.location}</TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.email}</TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.status}</TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.role}</TableCell>
                            </TableRow>
                        );
                    })}
                </TableBody>
            </Table>
        </Paper>
    );
}

NextPersonTable.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(NextPersonTable);

我想在桌面上添加带按钮的App栏，我遇到了问题。我应该在我的表所在的同一个类中添加此栏，还是应该使用此栏创建新的类jsx并且应该像此组件的组件一样添加？请有人帮帮我吗？

Answer 1

根据评论，我想你想添加类似的内容：

function NextPerson(props) {
  render() {
    return (
      <Paper className={classes.root}>
        <AppBar />
        <NextPersonTable classes={this.props.classes} />
      </Paper>
    );
  }
}

...
export default withStyles(styles)(NextPerson);

然后

NextPerson是＆＃34;完整组件＆＃34;包裹桌子。（您可能还想从表格中删除Paper组件。您也可以使用相同的方式定义MyAppBar来自定义AppBar。

仅供参考，如果您最终获得其他更多道具，可以通过NextPersonTable将整件事传递到<NextPersonTable {...this.props} />。

您还可以继续直接包裹NextPersonTable withStyles（然后不通过类）（在这种情况下，您执行const StyledNextPersonTable = withStyles(styles)(NextPersonTable)之类的操作，然后使用＆＃39;在根组件中设置了表格，或者你可以为两者创建一个样式常量，无论你喜欢什么。

将App Bar添加到表中

1 个答案: