这里有什么问题？内部具有三元的组件

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 | {显示用户时间？ 34 | （{parsedStartDate}

35 | {parsedStartDate !== parsedEndDate && {parsedEndDate}}) | ^ 36 | : 37 | ({parsedLocalStartDate} 38 | {parsedLocalStartDate !== parsedLocalEndDate && {parsedLocalEndDate}})}

Answer 1

与其用三元运算符做智力游戏，不如使用 if 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>

这里有什么问题？内部具有三元的组件

What is wrong here? Component with ternary inside

javascript

reactjs

components

ternary