MERN：根据条件显示按钮

Question

我正在使用 React.JS 并试图根据变量的状态显示一组按钮，这是代码片段：

  const cartContentButtons = (
    <button className={classes["button--alt"]} onClick={props.onClose}>Close</button> &&
    <button className={classes["button--alt"]} onClick={orderHandler}>Order's Details</button>    
  );

  const orderDetailsButtons = (
    <button className={classes["button--alt"]} onClick={props.onClose}>Close</button> &&
    <button className={classes["button--alt"]} onClick={orderHandler}>Cart's Content</button> &&    
    <button className={classes["button--alt"]} onClick={orderHandler}>Order's Checkout</button>        
  );

  const modalActions = (
    <div className={classes.actions}>
      !isCheckout && hasItems ? cartContentButtons : orderDetailsButtons;
    </div>
  );

但是，在代码执行期间，结果是这样的：

我缺少什么才能正确显示按钮？

非常感谢

Answer 1

您忘记在您的条件中包含方括号，每当您想要基于某种逻辑或非组件的内容呈现时，您应该将其包含在方括号中

  const cartContentButtons = (
    <button className={classes["button--alt"]} onClick={props.onClose}>Close</button> &&
    <button className={classes["button--alt"]} onClick={orderHandler}>Order's Details</button>    
  );

  const orderDetailsButtons = (
    <button className={classes["button--alt"]} onClick={props.onClose}>Close</button> &&
    <button className={classes["button--alt"]} onClick={orderHandler}>Cart's Content</button> &&    
    <button className={classes["button--alt"]} onClick={orderHandler}>Order's Checkout</button>        
  );

  const modalActions = (
    <div className={classes.actions}>
      // include brackets here
      {!isCheckout && hasItems ? cartContentButtons : orderDetailsButtons}
    </div>
  );

看看 react docs 了解更多。

Answer 2

您必须将条件语句括在花括号中并删除末尾的分号。

<div className={classes.actions}>
  {!isCheckout &&
    hasItems ? cartContentButtons : orderDetailsButtons
  }
</div>

看看documentation

MERN：根据条件显示按钮

MERN: show buttons based on conditional

reactjs

conditional-operator