如何将邮件包裹在相应的单元格中而不扩展到另一行？

Question

HI，我是一个新的reactjs用户，我的目标是将邮件包裹在相应的单元格中，而不延伸到其他行。Members 字段，因为它类似于 Qualification & experience 如快照中所示，供参考。谁能帮我把邮件包装在 成员 场而不超过 Action 字段。

<Table>
            <Table.Header>
              <Table.Row>

                <Table.HeaderCell>Group Name</Table.HeaderCell>
                <Table.HeaderCell>Members</Table.HeaderCell>
                <Table.HeaderCell>Action</Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>

                <Table.Row >

                  <Table.Cell>Group 1</Table.Cell>
                  <Table.Cell >[email protected], [email protected], [email protected]</Table.Cell>
                   <Table.Cell>
                    <Button variant="info">Edit</Button>
                    &nbsp;<Button variant="danger">Delete</Button>
                  </Table.Cell> 
                </Table.Row>
            </Table.Body>
          </Table>

以下是示例代码

有谁能帮我在这个查询中，在成员字段中包装电子邮件，而不超出对 Actions 字段。

Answer 1

如果你设置了 width 或 max-width 表单元格的样式（好吧，技术上说是表单元格的样式）。<td> 它们生成的元素），它们的内容将自动包装。

在这里不需要 "重新发明轮子"：如果你告诉它什么时候开始包装......即通过定义你的表格的列的宽度，浏览器将为你做你想要的一切。

Answer 2

这可以通过让这样一个方法来实现，该方法负责电子邮件在 <Group> 组件。

renderEmails(emails) {
    return emails.map((email) => <div key={email}>{email}</div>);
}

把每一封邮件都包裹在一个单独的 <div> 允许在新行中显示。

然后只需在 <Group> 组件的渲染方法是这样的。

<Table.Cell>
    {this.renderEmails(['[email protected]', '[email protected]', '[email protected]'])}
</Table.Cell>

请看一下 您的编辑样本.