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

你有一些错误

return应该只返回一个组件
如果括号不匹配，则语法错误

见这里

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标记，并使用}

结束三元运算符的排序

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

但是，如果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用于反应组件的一半，而只能用于整个组件或其内部组件。

这意味着您无法使用此类代码：

＆＃13;

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

＆＃13;

而你可以使用这样的变体：

＆＃13;

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

＆＃13;

或者您可以使用to参数的条件，正如其他答案中提出的那样

如果是其他jsx使用<link />做出反应

5 个答案: