有没有办法为<Link>提供条件？

Question

该页面显示了从数据库获取的元素列表；关于最后显示的元素，单击它，如果显示“ Carica Referto”，我需要链接到“ / upload”，如果显示“ Leggi Refered”，则需要链接到/consensi/{this.$state.item.hash_consenso}'。 “

我尝试放置If和Else，但由于没有在react-router-dom中定义它们（链接已定义），它会响应错误

import React, { Component } from 'react'
import { Link } from 'react-router-dom'

class ConsensiItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            item: props.item
        }
    }  

    render() {
        return (
            <li className="registration-form">
                <ul className="container">
                    <li className="registration-form">Paziente :{this.state.item.giver}</li>
                </ul>
                <ul className="container">
                    <li className="registration-form">Data inizio consenso :{this.state.item.data_inizio}</li>
                </ul>
                <ul className="container">
                    <li className="registration-form">Data Fine Consenso :{this.state.item.data_fine}</li>
                </ul>
                <ul> 
                    Tipo consenso :
                    <Link to= {'/upload'}>{this.state.item.diritti}</Link>
                </ul>
                <br/>
                <br/>
            </li>
        )
    }
}

export default ConsensiItem

Answer 1

TL; DR：：没有其他选项可以在react jsx中使用if内的{}。 很有可能是因为您需要{}内部的运算符才能返回内容。 &&，||和?运算符总是返回某些内容，您可以放心使用它们。尽管if语句不返回任何内容。

请阅读有关conditional rendering的反应文档。

React为您提供了几种条件渲染方式：

Inline If-Else with Conditional Operator

function MyComponent(props) {
  const isCondition = true;
  const hash = 'hash';
  return (
     <Link to={isCondition ? '/upload' : `/consensi/${hash}`}>text</Link>
  )
}

Using if statement

function MyComponent() {
  const isCondition = true;
  const hash = 'hash';
  if (isCondition) {
    return <Link to= {'/upload'}></Link>;
  }
  return <Link to={`/consensi/${hash}`}>text</Link>;
}

Inline If with Logical && Operator

function MyComponent(props) {
  const isCondition = true;
  const hash = 'hash';
  return (
     <div>
        {isCondition && <Link to= {'/upload'}>text</Link>}
        {!isCondition && <Link to={`/consensi/${hash}`}>text</Link>}
     </div>
  )
}