如果不是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>
    )
}

This code might be easy to understand but it won't work, it has snytax error. I can use onClick because I want to open the link in a new tab. How to use if else with Link ? Any clue?

Answer 1

You have a few mistakes

1. return should return only one component
2. You have syntax error as parenthesis are not matching

See here

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

Wrap you Link to statement within {} and also you neeed to close the first Link tag too as well as end the ternary operator exression with }

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>
       }
    )
}

However if the Link tags have the same content. It makes more sense to have ternary expression on the link target only

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

I would do it like this,

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

You have the problem, because you can't use if-else for halves of react-components, but only for whole components or their internal parts.

It means that you can't use such code:

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

and instead you could use such variant:

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

or you can use condition for to parameter, as was proposed in other answers