如何在 React Reusable Component 中实现条件渲染？答案

【问题标题】：How to implement conditional rendering in React Reusable Component?如何在 React Reusable Component 中实现条件渲染？
【发布时间】：2021-02-01 19:38:30
【问题描述】：

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

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;

任何帮助将不胜感激！

【问题讨论】：

标签： javascript reactjs

【解决方案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，它将呈现按钮，否则不会

【讨论】：

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

【讨论】：

如果您可以投票或接受我的解决方案（如果它运行良好），我们将不胜感激：)
是的，我做到了，但我的声誉太低，所以它没有公开表明我做到了！投票仍然记录在案

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

祝你好运……

【讨论】：