如何使用 reactjs 对齐文本字段答案

【问题标题】：How can i align the text fields using reactjs如何使用 reactjs 对齐文本字段
【发布时间】：2020-03-30 14:15:56
【问题描述】：

我是 Material-UI 框架的新手，想根据快照在左侧显示内容，在右侧显示内容。

我尝试过使用卡片和网格，但无法通过这种方式。

我无法根据内容拉伸网格。这是代码：

   <Card>
        <CardHeader
          avatar={<Avatar aria-label="recipe">AJ</Avatar>}
          title={
            <TextField placeholder="Search" margin="normal" />

          }
          action={
            <IconButton aria-label="settings">
              <MoreVertIcon />
            </IconButton>
          }
        />
        <Divider />
        <CardContent>
          <Grid container spacing={3}>
            <Grid item xs={3} md={3}>
              <Paper className={classes.viewLeft}>hi i'm abc</Paper>
            </Grid>

            <Grid item xs={3} md={6} className={classes.viewRight}>
              <Paper>
                hi i'm abc workingqwertyuiopqwertyuiop dfgthyjklkddhwbuefh weuh
                vwetbg2ehn{" "}
              </Paper>
            </Grid>
          </Grid>
        </CardContent>
      </Card>

这里是完整的代码：“https://codesandbox.io/s/hopeful-dust-jk4gd”

谁能帮我解答这个问题？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我认为您可以更轻松地管理此布局。请注意，您每行只有一条消息，这意味着您可以用<Grid item xs={12}></Grid> 包裹您的内卡

这是一个简单的 Message 组件，可以激发你的灵感

function Message({ content, isSender }) {
  return (
    <Grid container>
      <Grid item xs={12}>
        <Card
          style={{
            backgroundColor: "#eee",
            float: isSender ? "right" : "left",
            padding: 16,
            minHeight: 40,
            width: 100,
            display: "flex",
            alignItems: "center",
            textAlign: "center"
          }}
        >
          {content}
        </Card>
      </Grid>
    </Grid>
  );
}

然后你可以像这样使用它：

<Message isSender content="Hello" />
<Message content="Hello back" />

这将产生以下图片：

PS：此组件仅用于演示目的，显然还没有准备好投入生产，也不能完全满足您的需求。

编辑：以下提示可以帮助您设计组件：

添加一个isFirstMessage 属性，如果为真，将添加头像并减小右上角的边框半径。
基于 is sender 属性，为头像留下<Grid item xs={1}></Grid>

编辑 2 如cmets中所讨论的，您只需玩Grids即可添加消息的名称和头像

一个简单的实现应该是这样的：

<Grid container>
  <Grid style={{ paddingBottom: 8 }} item xs={12}>
    <span className={classes.authorName}>{authorName}</span>
  </Grid>
  <Grid item xs={12}>
    <span className={classes.messageContent}>{content}</span>
  </Grid>
</Grid>

要添加头像，你只需要给它容器网格的一小部分；像这样

{!isSender && (
  <Grid className={classes.avatarContainer} item xs>
    <Avatar />
  </Grid>
)}

结合这两个技巧可能会产生如下结果：

请在this codesandbox 中找到完整的工作示例

【讨论】：

如果您觉得有用，请接受答案。谢谢