如何使用 props 启用和隐藏 [list, button, images,..etc ]答案

【问题标题】：How can I enable and hide [list, button, images,..etc ]by using props如何使用 props 启用和隐藏 [list, button, images,..etc ]
【发布时间】：2022-01-21 10:15:15
【问题描述】：

这是组件：

<ReusedHeader
  H1headerGray="text... "
  H2headerRed="text2 ! "
  pheader="p1"
  getStarted="button text1"
  hrefab="button url 1"
  whatWeDo="button text2"
  hrefbb="button url 2"
  imageSrc="image url"
/>;

组件中的列表：

<li className=" hover:ring active:ring-4 w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-red-600 hover:bg-red-700 md:py-4 md:text-lg md:px-10">
  {getStarted}
</li>

而且这个组件我会在很多地方使用；在某些地方，我想要没有按钮的组件；

如果可能，如何启用和禁用按钮？

【问题讨论】：

你的按钮在哪里？
我从 tailwind 组件中得到这个组件，所以我猜 li 可以做同样的事情按钮做，因为我看到了结果，它没有什么不同
我想这是一个普遍的问题：如何使用道具启用和隐藏[列表、按钮、图像、..etc]
您可以通过在 onClick 处理程序上添加条件来做到这一点，如果 props.disabled == true 则不做任何事情。
这种情况会隐藏按钮吗？

标签： javascript reactjs next.js tailwind-css

【解决方案1】：

您可以只传递所需的道具并处理组件内的逻辑

const ReusedHeader = ({buttonsEnabled=true}) => {
    if(buttonsEnabled){ // return something }
    else { // return something else }
}

如果您想要没有 onClick 功能的相同标记，或者修改 onClick。

onClick={buttonsEnabled? onClick : undefined}

【讨论】：