如何在React JS中管理布局和对齐？

Question

我最近开始用React编码。一切都很好，只是我找不到合适的方法来管理UI中的布局和对齐。我在UI5框架中很有经验，在那里这些东西都是开箱即用的，但在这里我找不到这样的东西--提供者库。

我也在使用UI5-WebComponents for React lib，但只有FlexBox和间距这样的东西。

不知何故，我依靠预定义的布局组件或控件，避免了大规模使用CSS。有没有类似的东西，我可以在React中使用？

如果有任何帮助，我将不胜感激

Answer 1

这是一个常见的调整，当开始React。 下面是我的工作方法。

在开发的时候，我把样式排成如下的样子

<MyReactComponent style={{top:'50%',position:'absolute'}} >
...
</MyReactComponent>

一旦我转移到生产中，我就可以把这些样式转移到.css文件中。

.MyReactComponentStyles {
   position: absolute;
   top: 50%;
}

然后将样式传递给组件

<MyReactComponent className="MyReactComponentStyles" >
...
</MyReactComponent>