我可以在语义-ui-react 卡中添加另一个组件而不会破坏它吗？答案

【问题标题】：Can I add another component inside a semantic-ui-react card without it breaking?我可以在语义-ui-react 卡中添加另一个组件而不会破坏它吗？
【发布时间】：2019-08-27 20:53:48
【问题描述】：

背景

我有一个以语义卡片显示电视节目的应用。每行有六张牌。我想在每张卡片上添加一个评论容器。注释容器最终会列出每个程序特定的 cmets。

由于我的 return 需要包含两个 JSX 组件，我必须将它们包装在一个 div 中。但是，这样做会打乱我每行六张卡片的格式。我不确定解决方法，除非可能以某种方式用我自己的 CSS 覆盖。谷歌并没有太多帮助，虽然也许我只是没有使用正确的搜索词。

对我应该做什么有什么想法吗？

代码

Programs.js Link to full file

return(
      <div>
        <Grid columns='six' divided='vertically'>
            <Grid.Row >
              {props.programs && props.programs.map((program) => <Program key={program.name} program={program} />)}
            </Grid.Row>
        </Grid>
    </div>
  )

Program.js。我要我去追 Link to full file

return(

          <Grid.Column>
            <Card onClick={(_) => {}}>
              <Image src={program ? program.image : null} wrapped ui={false} />
              <Card.Content>
                <Card.Header>{program ? program.name: null}</Card.Header>
                <Card.Meta>
                  <span className='date'>{program ? program.network : null}</span>
                </Card.Meta>

              </Card.Content>
            </Card>

          </Grid.Column>

      )

非常感谢您的宝贵时间！

【问题讨论】：

如果您需要包装两个没有包含 div 的元素，请使用反应片段：使用片段：reactjs.org/docs/fragments.html
@azundo 我一直想知道如何使用片段！没有意识到它会在这种情况下工作。谢谢你帮我解决这个问题。 :-)

标签： javascript reactjs redux semantic-ui

【解决方案1】：

根据 Semantic UI React 中的 docs，只要将所有内容保存在名为 content 和 context extra 的容器中就可以了。

另见他们在https://react.semantic-ui.com/views/card/#content-content-block中显示“内容块”的示例（他们显示代码）

【讨论】：