时间戳

首页 > 解决方案 > 如何在 React Reusable Component 中实现条件渲染？

javascript - 如何在 React Reusable Component 中实现条件渲染？

问题描述

我有这个可重用的组件，我想通过它传递一个值，如果为真：返回按钮，如果值为假：按钮不呈现。我不知道如何使用可重用组件来做到这一点。我要使用的布尔变量是 displayButton ，如果它为真，则呈现按钮，如果为假，则不呈现按钮。

const Test = ({ name, value, onClick, purchased, displayButton }) => {
  return (
    <div class="cardData">
      <h5>{name}</h5>
      <p>Cost: {value}</p>
//if display button = true, display this button, if false, button is not displayed
      <button
        type="button"
        onClick={onClick}
        class="btn btn-primary"
        value={value}
        name={name}
      >
        Purchase
      </button>
      <h4>{purchased}</h4>
    </div>
  );
};

export default Test;

任何帮助将不胜感激！

标签： javascriptreactjs

解决方案

const Test = ({ name, value, onClick, purchased, displayButton }) => {
  return (
    <div class="cardData">
      <h5>{name}</h5>
       <p>Cost: {value}</p>
      {displayButton &&
        <button
          type="button"
          onClick={onClick}
          class="btn btn-primary"
          value={value}
          name={name}
        >
          Purchase
        </button>
      }
      <h4>{purchased}</h4>
    </div>
 );
};

export default Test;

如果displayButton有true它的值将呈现按钮，否则不会

推荐阅读