ReactJS可重用组件样式

如何解决ReactJS可重用组件样式

我有可重用的组件。该组件有2个按钮。在一页上，两个按钮都被显示，但是在第二页上，我只想显示一个按钮，

有什么建议吗？我尝试通过样式作为道具，但是没有用

我是说：

    const MoneyManagementOffers = ({text,title,style}) => { 
   return <Button style={style} border="none" margin="58.75px auto;" primary width="134px;">
            Learn More
          </Button>

这只是我代码的一部分。这是我要在第二页上隐藏的按钮。

这是我在另一个地方调用此组件时尝试使用的样式道具的方式：

      <MoneyManagementOffers style={display:"none;"} text={"Get Started"}/>

这不起作用。关于如何解决此问题的任何建议？

我正在使用样式组件

解决方法

解决方案1：

您根本不会通过引入名为shouldShow的新道具来呈现按钮，例如，默认为true：

const MoneyManagementOffers = ({text,title,style,shouldShow = true}) => { 
return shouldShow && <Button style={style} border="none" margin="58.75px auto;" primary width="134px;">
        Learn More
      </Button>;

当您要隐藏它时：

<MoneyManagementOffers shouldShow={false}/>

以及要显示的时间：

<MoneyManagementOffers style={....} text={"Get Started"}/>

您可以查看有关Conditional Rendering的官方文档。

解决方案2：

在父级确定是否要使用Conditional Rendering（与解决方案1相同的语法）完全渲染MoneyManagementOffers

解决方案3：

如果您真的想通过display: none（我不建议这样做），则应该将道具包在{}之类的外部style={{ display: "none" }}中，因为它应该是object ，而不是string。

您不应该在元件中设置隐藏的道具，因为元件应该尽可能的笨。最好决定父级：

const ParentComponent = () => {
    ...someCode;
    const renderOffers = () => {
      if (someCondition) {
        return null
      }
      return <MoneyManagementOffers ... />
   }
   return (
     <>
        ...someCode
        {renderOffers()}
     </>
   )
}