Question

我想了解一下人们会考虑最佳实践的反应组件布局，以及布局样式应该或不应该在组件本身内紧密耦合。

假设我有一个可以在应用程序中多次重复使用的自定义组件，有时候我可能会将它们垂直向下堆叠在页面上，margin-bottom:20px;，但可能有我想要的情况它们使用margin-right:20px;

在页面上横向展开

如果我要将margin或其他布局属性与组件紧密结合，那感觉不对吗？我原以为我应该能够独立地通过组件进行渲染，而不需要将位置样式与它结合起来？

Answer 1

如果您在一个布局中多次使用该组件，那么边距当然不是组件的一部分，而是包含它的组件。

您可以使用不同的方法来获得所需的边距，例如，您可以使用css网格间隙来定义该边距。

但是，如果使用flex，则可能必须将所需的边距向下传递给组件。因此，在这种情况下，在组件内部使用这样的东西会有所帮助：

<div id="container" style={[styles.container, this.props.margin]}>

这样你可以在容器样式中给它一个默认的边距，同时在不同的地方使用时仍允许自己通过道具传递动态值。

Answer 2

您可以使用支柱来定义组件的类型，例如，类型道具。并且您可以根据您使用默认类型接收的类型来应用类。

static propTypes = { type: PropTypes.oneOf(['info', 'warning', 'error']) };
default propTypes = { type: 'info' };

并且渲染将如下所示：

<div className={styles[this.props.type]}>content</div>

或者您可以只使用单一方式查看组件并添加className prop和/或将自定义样式作为内联样式传递。

<MyComponent style={{ marginBottom: '30px' }} className="CustomStyleInClass" type="error" />

您可以使用一个，两个或全部。这取决于您需要的组件和灵活性。