Question

在我的父组件中：

        {
          this.state.projectList.map(dat => <Item data = {dat}/>)
        }

在子组件Item

中

render() {
    return (
        <div style={{'width':'100%', 'textAlign':'center'}}>
            <Card style={{ width: '25rem', padding: '1rem', display: 'inline-block' }}>
                <CardPrimaryAction>
                    <div style={{ padding: '0 1rem 1rem 1rem' }}>
                    <Typography use="headline6" tag="h2">
                        {this.props.data.name}
                    </Typography>
                    <Typography use="body1" tag="div" theme="text-secondary-on-background">
                        {this.props.data.description}
                    </Typography>
                    </div>
                </CardPrimaryAction>
            </Card>
        </div>
    );
}

我正在使用rmwc Card组件放置一些东西。

现在，它只是将所有渲染的项目像堆栈一样垂直放置。我真正想要的是图像右侧蓝色笔中的小草图。

我试图给包装的div 'width':'100%', 'textAlign':'center'和Card本身一个inline-block，但还是一样。

Answer 1

在父组件中将您的地图函数封装在一些CSS中。我看到您正在使用material-ui组件，所以在这里我将展示其中的一些组件。

<div className={classNames(classes.layout, classes.cardGrid)}>
      <Grid container spacing={40}>
        this.state.projectList.map(dat => 
          <Grid item key={dat} xs={6}> 
            <Item data = {dat}/>
          <Grid/>
       ))}
   </Grid>
</div>

父级组件的进一步样式：-

 const styles = theme => ({
      layout: {
        width: "auto",
        display: "inline-block",
        marginLeft: theme.spacing.unit * 3,
        marginRight: theme.spacing.unit * 3,
        [theme.breakpoints.up(1100 + theme.spacing.unit * 3 * 2)]: {
          width: 1100,
          marginLeft: "auto",
          marginRight: "auto"
        }
      },
      cardGrid: {
        padding: `${theme.spacing.unit * 8}px 0`
      }
    });

在子组件中，删除父<div>，一切顺利。 请导入必要的依赖项。

如何在React中水平对齐卡片元素（rmwc）？

1 个答案: