Javascript 如何在多个位置使用单个组件？

在React中，可以创建可以根据需要使用的组件，就像HTML组件一样。但是，我的组件有不同的用例，它们用于UI的不同区域

因此，我需要不同的CSS来定位组件

例如，如果我有

Component.jsx

和

Component.css

，但是我想在不同的地方使用Component.jsx，使用不同的css，我应该使用什么设计模式或策略来实现这一点

比如说,

.medd_link {
  margin-top:3px;
  float: right;
}

我需要

.medd_link{
  position: relative;
  top: 2px;
}

在不同的用例中

我应该使用什么样的设计模式或策略来实现这一点

它叫

您可以创建由专用组件使用的通用组件。 专用组件将具有自己的样式

功能组件（道具）{
const{style，text}=props；
返回(
{text}
);
}
Component.defaultProps={
风格：{
玛金托普：0，
marginLeft:0，
}
}
//专用部件
功能组件A（道具）{
常量样式={
宽度：“20px”，
高度：“20px”，
位置：“绝对”，
玛金托普：“10px”，
背景颜色：“绿色”
};
返回(
);
}
//另一个专门的组成部分
功能组件B（道具）{
常量样式={
宽度：“20px”，
高度：“20px”，
位置：“绝对”，
边缘左侧：“50px”，
背景颜色：“红色”，
};
返回(
);
}
功能应用程序（道具）{
返回(
);
}
ReactDOM.render(
,
document.getElementById（“根”）
)

---

要实现这一点，可以使用className属性设置css类。例如：

.position_one {
  margin-top:3px;
  float: right;
}

.position_two{
  position: relative;
  top: 2px;
}

<YourComponent className="position_one" />
<YourComponent className="position_two" />

。定位一个{
利润上限：3倍；
浮动：对；
}
1.位置2{
位置：相对位置；
顶部：2个；
}

您可以使用propsA将不同的样式传递给组件。组件不需要知道它在父级中的位置。最好的做法是控制css在父组件中的定位-因此将

component.css

移动到

parent component.css

中，并在

ParentComponent.jsx

中使用这些样式。我想你想得太多了。如果你需要你的组件是“灵活的”，你应该通过道具来提供这种灵活性。想象一个简单的按钮——你设置它的高度、宽度、颜色等。如果它不够，也许你在尝试做一些不寻常的事情？