如果不是jsx使用 <Link> 反應

Question

render(){
    return(
        {startDate && endDate ? <Link to=`/event/${event_id}?start=${startDate}&?end=${endDate}` target="_blank"> : <Link to=`/event/${event_id}` target="_blank">
            <div>lots of my content here</div>
        </Link>
    )
}

該代碼可能易於理解，但無法正常工作，但存在snytax錯誤。 我可以使用onClick，因為我想在新標簽頁中打開鏈接。 如何在Link上使用if else？ 有什么線索嗎？

Answer 1

你有一些錯誤

1. return應該只返回一個分量
2. 您有語法錯誤，因為括號不匹配

看這里

render() {
    return (
        <div>
          {
           startDate && endDate
           ?
           <Link to=`/event/${event_id}?start=${startDate}&?end=${endDate}` target="_blank"/> 
           :
           <Link to=`/event/${event_id}` target="_blank"/>
          }
          <div>lots of my content here</div>
     </div>
    )
}

Answer 2

render(){
   let link = `/event/${event_id}`;
   link = (startDate && endDate) ? `${link}?start=${startDate}&?end=${endDate}`;

    return(
        <Link to={link} target="_blank"> 
            <div>lots of my content here</div>
        </Link>
    )
}

Answer 3

在{}中將Link換成語句，然后也需要關閉第一個Link標記，並用}結束三元運算符

render(){
    return(
        {startDate && endDate ? <Link to={`/event/${event_id}?start=${startDate}&?end=${endDate}`} target="_blank"><div>lots of my content here</div></Link> : <Link to={`/event/${event_id}`} target="_blank">
            <div>lots of my content here</div>
        </Link>
       }
    )
}

但是，如果鏈接標簽具有相同的內容。 僅在鏈接目標上具有三元表達式會更有意義

render(){
        var link = (startDate && endDate) ? `/event/${event_id}?start=${startDate}&?end=${endDate}` : `/event/${event_id}`;

        return(
            <Link to={link} target="_blank">
                <div>lots of my content here</div>
            </Link>
           }
        )
    }

Answer 4

我會這樣

render() {
  const linkTo = startDate && endDate
    ? `/event/${event_id}?start=${startDate}&?end=${endDate}`
    : `/event/${event_id}`;

  return (
    <Link to={linkTo} target="_blank">
      <div>lots of my content here</div>
    </Link>
  );
}

Answer 5

您有問題，因為您不能將if-else用於一半的react-components，而只能用於整個組件或其內部零件。

這意味着您不能使用以下代碼：

 {condition ? <Link to="1"> : <Link to="2"> <div>lots of my content here</div> </Link>} 

相反，您可以使用以下變體：

 const content = <div>lots of my content here</div> {condition ? <Link to="1">{content}</Link> : <Link to="2">{content}</Link/>} 

或者您可以使用條件to參數，在其他的答案提出