这里怎么了？三元内部的组件

Question

    export const Date = ({ startDate, endDate, displayInUserTime }) => {
    const parsedStartDate = moment.utc(startDate).format("ll");
    const parsedEndDate = moment.utc(endDate).format("ll");
    const parsedLocalStartDate = moment(startDate).format("ll");
    const parsedLocalEndDate = moment(endDate).format("ll");

    return (
        <Content column className="col-1">
            {displayInUserTime ? 
            (<div>{parsedStartDate}</div>
            {parsedStartDate !== parsedEndDate && <div>{parsedEndDate}</div>}) 
            :
            (<div>{parsedLocalStartDate}</div>
            {parsedLocalStartDate !== parsedLocalEndDate && <div>{parsedLocalEndDate}</div>})}
        </Content>
    );
};

错误：解析错误：意外的令牌，预期为“，”

33 | {displayInUserTime？ 34 | （{parsedStartDate}

35 | {parsedStartDate！== parsedEndDate && {parsedEndDate}}） | ^ 36 | ： 37 | （{parsedLocalStartDate} 38 | {parsedLocalStartDate！== parsedLocalEndDate && {parsedLocalEndDate}}）}

Answer 1

而不是使用三元运算符制作思维游戏，如果使用else语句，您将如何使用

  let startDate = null;

  if(displayInUserTime) {
    startDate = <>
      <div>{parsedStartDate}</div>
      {parsedStartDate !== parsedEndDate && <div>{parsedEndDate}</div>}
    </>;
  }else {
    startDate = <>
      <div>{parsedLocalStartDate}</div>
      {parsedLocalStartDate !== parsedLocalEndDate && <div>{parsedLocalEndDate}</div>}
    </>
  }

  return (
        <Content column className="col-1">
            {startDate}
        </Content>
    );

Answer 2

您正在{}简化代码中返回多个元素，看起来像bool?<one/><two/>:<three/><four/>，另一个答案将代码更改为if语句，但您可以将三元数包装在React.Fragment中：bool?<><one/><two/></>:<><three/><four/></>

您的代码可能是：

<Content column className="col-1">
  {displayInUserTime ? (
    <>
      <div>{parsedStartDate}</div>
      {parsedStartDate !== parsedEndDate && (
        <div>{parsedEndDate}</div>
      )}
    </>
  ) : (
    <>
      <div>{parsedLocalStartDate}</div>
      {parsedLocalStartDate !== parsedLocalEndDate && (
        <div>{parsedLocalEndDate}</div>
      )}
    </>
  )}
</Content>