找不到如何在 jsx 表达式中正确编写三元运算符答案

【问题标题】：Cannot find how to properly write ternary operator in jsx expression找不到如何在 jsx 表达式中正确编写三元运算符
【发布时间】：2020-02-13 13:37:58
【问题描述】：

我有一个三元运算符，我想在 jsx 表达式中添加它。每次我尝试添加它时，反应都会给我一个错误。该错误表明 jsx 表达式必须有一个父元素。这是我的代码：

import React, { useState, useContext } from 'react'
import uuid from 'uuid/v1'
import { NavContext } from '../contexts/NavContext';
import { VegetarianContext } from '../contexts/VegetarianContext';

const BaseLayers = (props) => {
let tacos = props.tacos;
const [background, setBackground] = useState({ clickedItem: '' });
let { toggleNav } = useContext(NavContext);
**let { isVegetarian } = useContext(VegetarianContext);**
return (
    <div className='base-layers'>
    <img className="menu" src={require("../img/tacomenu.png")} onClick={toggleNav} />
    <div className="base-layers-info" >START BY CHOOSING A BASE LAYER</div>
      { Array.isArray(tacos.base_layers) && tacos.base_layers.map(item => {
         return <div className="base-layer" key={uuid()} id={item.title} style={{ backgroundColor: (background.clickedItem === item.title) ? '#0892d0' : 'red' }} >
                    **{ isVegetarian ? ( <div>The user is vegetarian</div> ) : (**
                    <h4 className="base-layer-title">{ item.title }</h4>
                    <img src={require('../img/taco-cards.jpg')} alt="tacomenu" />
                    <div className="base-layer-ingredients-container">
                    { item.ingredients.map(item => {
                        if(typeof item === 'string'){
                            return   <h6 className="base-layer-ingredients" key={uuid()}>{ item }</h6>
                        }
                        if(typeof item === 'object'){
                            return  <h6 className="base-layer-ingredients" key={uuid()}>{ item.title }</h6>
                            return  <h6 className="base-layer-ingredients" key={uuid()}>{ item.ingredients }</h6>
                        }
                    }) }
                    </div>
                    <button className="base-layer-button" onClick={(e) => {
                        props.setBaseLayer(e.target.parentElement.id);
                        setBackground({ clickedItem: e.target.parentElement.id });
                    }} >
                        Choose this base layer
                    </button>
                    <div className="base-layer-tags-container">
                    { item.tags.map(item => {
                        return   <h6 className="base-layer-tags" key={uuid()}>{ item }</h6>
                    }) }
                    </div>
                    ) }

                </div>
        })}

    </div>
);
}

 export default BaseLayers;

【问题讨论】：

三元运算符在哪里？这只是混乱。这是一个吗？ isVegetarian ? ( <div>The user is vegetarian</div> ) : /*...*/
你在这里做的太多了。这可能应该分成多个组件。您是否阅读过关于条件渲染的 react 文档部分？ reactjs.org/docs/conditional-rendering.html

标签： reactjs jsx ternary-operator

【解决方案1】：

三元表达式的每一段都应包装为一个元素。如果要返回多个，我建议将它们包装在 a 中，以免在 DOM 中引入另一层。

{ isVegetarian ? 
  <div>
    The user is vegetarian
  </div>
  :
  <React.Fragment>
    <h4 className="base-layer-title">{ item.title }</h4>
    <img src={require('../img/taco-cards.jpg')} alt="tacomenu" />
  </React.Fragment>
}

【讨论】：