Question

在尝试将React代码保持为可重用的时候，我经常将CSS类作为React组件中的属性传递。对此的用例是这些组件的功能完全相同，但根据它们在页面中的位置可能看起来不同。

将一个CSS类作为可接受的React组件中的属性传递，还是有更好的方法来完成上述用例？

快速，简化的例子：

const ToolTipButton = ({ buttonClass, onButtonClick, children }) => (
  <button
    className={buttonClass}
    onClick={onButtonClick}
    data-toggle="pages-tooltip"
    data-placement="top"
    title="Do Something"
  >
    {children}
  </button>
);

<ToolTipButton buttonClass={'ButtonClass1'} onButtonClick={this.doesSomething}/>
<ToolTipButton buttonClass={'ButtonClass2'} onButtonClick={this.doesSomething}>
  // Text and other stuff
</ToolTipButton>

Answer 1

Css选择器是可链接的，因此只需要纯css，您就可以根据容器拥有单独的样式。按钮组件可以具有静态类，例如tool-tip-button，并将样式表范围包含在包含组件中。 E.g。

.tool-tip-button {
  color: black;
}

.component-a .tool-tip-button {
   color: green;
}

.component-b .tool-tip-button {
   color: red;
}

请注意，反应组件可以（并建议）具有各自的样式表，例如： ComponentA.css和ComponentB.css，只需导入它们：

// ComponentA.js
import './ComponentA.css'

Answer 2

只要您的类定义在范围内，将类名称作为道具传递是完全可以接受的。在类定义不在范围内的情况下，替代方法是传递样式定义对象。例如：

const ToolTipButton = ({ style, onButtonClick, children }) => (
  <button
    style={style}
    onClick={onButtonClick}
    data-toggle="pages-tooltip"
    data-placement="top"
    title="Do Something"
  >
    {children}
  </button>
);

<ToolTipButton style={{backgroundColor: 'red'}} onButtonClick={this.doesSomething}/>

某些组件库（例如Material UI）允许您将类名和样式定义对象作为props传递。通常，如果可能的话，最好只使用类名（以避免在js中定义样式）。

重用具有不同样式的React组件

2 个答案: