Javascript 重用具有不同样式的React组件
为了使React代码尽可能可重用,我经常在React组件中将CSS类作为属性传递。这样做的用例是,这些组件的功能完全相同,但根据它们在页面中的位置,它们的外观可能会有所不同 是否可以将CSS类作为属性传递给React组件,或者是否有更好的方法来完成上述用例? 快速、简化的示例:Javascript 重用具有不同样式的React组件,javascript,css,reactjs,twitter-bootstrap-3,components,Javascript,Css,Reactjs,Twitter Bootstrap 3,Components,为了使React代码尽可能可重用,我经常在React组件中将CSS类作为属性传递。这样做的用例是,这些组件的功能完全相同,但根据它们在页面中的位置,它们的外观可能会有所不同 是否可以将CSS类作为属性传递给React组件,或者是否有更好的方法来完成上述用例? 快速、简化的示例: const ToolTipButton = ({ buttonClass, onButtonClick, children }) => ( <button className={buttonCla
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>
consttooltipbutton=({buttonClass,onButtonClick,children})=>(
{儿童}
);
//文本和其他内容
Css选择器是可链接的,因此仅使用纯Css,您就可以根据容器拥有单独的样式。button组件可以有一个静态类,例如工具提示按钮
,并且样式表将其作用于包含的组件。例如
.tool-tip-button {
color: black;
}
.component-a .tool-tip-button {
color: green;
}
.component-b .tool-tip-button {
color: red;
}
请注意,react组件可以(并且建议)有自己的单独样式表,例如ComponentA.css
和ComponentB.css
,只需导入它们:
// ComponentA.js
import './ComponentA.css'
只要您的类定义在范围内,将类名作为道具传递是完全可以接受的。在类定义不在范围内的情况下,另一种方法是传递样式定义对象。例如:
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}/>
consttooltipbutton=({style,onButtonClick,children})=>(
{儿童}
);
某些组件库(例如材质UI)允许您将类名和样式定义对象作为道具传递。通常,如果可能,最好只使用类名(以避免在js中定义样式)。采用类似的方法。我建议你检查一下。几乎所有构建的组件,无论是语义、引导等等。。。组件通常接受一个类名属性。