如何在 React Reusable Component 中實現條件渲染？

Question

我有這個可重用的組件，我想通過它傳遞一個值，如果為真：返回一個按鈕，如果值為假：按鈕不呈現。 我無法弄清楚如何使用可重用組件來做到這一點。 我想使用的布爾變量是 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;

任何幫助將不勝感激！

Answer 1

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它將呈現按鈕，否則不會

Answer 2

這將起作用。

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;

Answer 3

您可以創建一個ShowHide組件，該組件可用於條件渲染，而不是在需要條件渲染的每個JSX中使用邏輯運算符。

 // create a ShowHide component const ShowHide = ({show,children} ) => show && children // your Test component with the button wrapped in ShowHide const Test = ({ name, value, onClick, purchased, displayButton }) => { return ( <div class="cardData card col-6 m-3"> <h5>{name}</h5> <p>Cost: {value}</p> <ShowHide show={displayButton}> <button type="button" onClick={onClick} class="btn btn-primary" value={value} name={name} > Purchase </button> </ShowHide> <h4>{purchased}</h4> </div> ); }; const root = document.getElementById('root'); ReactDOM.render( <Test name="My Card" value="250,000" onClick={() => alert('clicked')} purchased="Yes!" displayButton={false} />, root )

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script> <div id="root"></div>

祝你好運...