javascript - 如何使动态 ReactJS 组件在高度上匹配，并在内容上对齐？

Question

使用 ReactJS，我根据动态状态值生成组件的内容。

我希望距离匹配，而不是像下图那样，当渲染较长的字符串时(如上面的文本)，我的组件变得高度不等，下面的文本组件也会跳下来:

我现在使用的代码是 Rebass 来制作两个父列，对于其中组件中的文本，我使用如下样式的组件:

const Title = styled.h1`
font-family: "Raleway", sans-serif;
font-style: slim;
font-weight: 300;
font-size: 1em;
text-align: center;
color: black;
`;

const Text = styled.h6`
font-family: "Raleway", sans-serif;
font-weight: 300;
font-style: thin100;
text-align: justify;
color: black;
`;

在 render() 中:

<Title>{this.props.title}</Title>
<Text>
  <b>Cuisine: </b>
  {this.props.cuisine.toString().replace(/,/g, " ")}
</Text>

使我的组件对齐的最佳方法是什么？我必须给每个文本元素一个固定的高度吗？如果是这样，最好的方法是什么？

谢谢!

Answer 1

如果您知道自己永远不会得到三行，则可以将高度固定为与两行匹配的大小。这样，只有一行，间距将相同。

另一种方法是，如果你想保持标题在顶部，笑脸在底部，其他内容在中间，可以在父元素上放置 justify-content: space-between 来展开屏幕周围的这三样东西。