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

Question

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

我也在使用 UI5-WebComponents for React 库，但只有 FlexBox 和间距之类的东西。

我依靠预定义的布局组件或控件，以某种方式避免了大规模使用 CSS。我可以在 React 中使用类似的东西吗？

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

Answer 1

这是启动 React 时的常见调整。这是对我有用的。

在开发过程中，我按如下方式排列样式

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

一旦我开始生产，我就可以采用样式并将它们移动到 .css 文件

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

然后将样式传递给组件

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