如何使用 map 函数 reactjs 删除 jsx 元素的 html

Question

我有一个愚蠢的问题，我的代码工作得很好，但我有一个问题，我必须再添加一个

标签，而不是只在网页上显示一些东西，

请阅读评论，任何人都可以告诉我如何编写这段代码，所以我不必使用两个 html 标记，我不想标记，我只需要一个，请阅读评论

    showOrderItem(){

                    const orderItems=this.props.orderItems
                    const orderItem=orderItems.map((order,item)=>
                    <p>// if i remove this it wont display me any thing
        { order.quantityEditing?
                        //if i remove these p tag, it will display me the 
            error, adjacent jsx element must be wrapped in closing tag.
                        <p>{order.quantity} {order.itemName}</p>
                        :''

                    }</p>
                    );
    //Please read the comment below
                    return orderItem
                }

还有一件事， 为此，请给我一些 link 阅读，而不是在这里回答，这是什么意思，相邻的jsx元素必须用closing tag包裹，我的理解——元素应该写在一个根元素里，所以根据我的理解，我在这段代码中添加了一个 div 标记，但我想我对它的理解是错误的，谢谢你的时间

Answer 1

您有一些语法错误。如果 Shorthand 方法语法以大括号开头，则默认情况下不会 return 值。但是，您可以用括号括起一个块，默认情况下 return 一个值，或者根本不包含任何大括号。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

我认为这是对您的代码的更正：

showOrderItem() { 
  const orderItems = this.props.orderItems;
  const orderItem = orderItems.map((order, item) => {
    if(order.quantityEditing) {
        return (
          <p>{order.quantity} {order.itemName}</p>
        );
    } else {
        return '';
    } 
  };
  return orderItem;
}

如何使用 map 函数 reactjs 删除 jsx 元素的 html

how to remove on html of jsx element, using map function reactjs

jsx

reactjs