react.js - 问一个关于react组件化的问题

问题描述

问 题

众所周知，react的优势之一就是组件化，那怎么实现组件复用的最大化呢？

举个例子说，我想做一个button组件，然后在有使用button的地方都用这一个组件。但是很明显的是现实中的场景是比较复杂的，比如说不同地方使用的button的宽高不一样，颜色不一样，边框不一样等等。甚至有些组件在不同的情况下可能会少一些结构，或多一些结构，但是大部分是一样的等等。那么要如何来写这一些组件来实现组件的复用最大化呢？我想应该新手也会遇到和我一样的问题。

我的想法是有两个（严格来说是一个方法）：

第一：将行间样式通过props传给组件，从而定制组件的样式

第二：将classname通过props传给组件，再给组件配套一个css，从而定制组件的样式

请问我的这些想法对吗？

如果我的做法有问题，那么最佳实践方案应该是什么？

希望各位大神可以给我一些建议，给我一个思路，或者给一个例子我参考一下

还有一个问题是这些组件写好后是怎么进行组件测试的？真实的工作中是怎么做的？

问题比较多哈.......

解决方案

用内联样式就可以解决了

let cls = {
    width: width || 默认,
    height: height || 默认,
    background: background || 默认,
    ...
}

<button style={cls}></botton>

这样写相当于把所有需要配置的属性都设置一个默认值，当外部不自定义样式的时候，就是显示默认样式。

亲测有效哦。

这篇关于react.js - 问一个关于react组件化的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！