时间戳

首页 > 解决方案 > ReactJS 可重用组件样式

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"}/>

这没有用。关于如何解决这个问题的任何建议？

我正在使用样式组件

标签： reactjsstyled-components

解决方案

解决方案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：

MoneyManagementOffers使用条件渲染在父级决定是否要渲染（与解决方案 1 的语法相同）

解决方案3：

如果你真的想通过display: none我不建议的，你应该将道具包裹在一个外部{}，style={{ display: "none" }}因为它应该是一个object，而不是string。

推荐阅读