React：渲染函數中的條件語句

Question

我有一系列不同藝術家的作品。 我想根據圖像是否在單個對象中顯示不同的內容。

我試圖在我的render方法中放置一個if/else語句，但是當然這不起作用。 請在下面查看我的代碼。

render: function() {
    var cardList = this.props.artists.map(function(artist, index){
        return(
          <li key={index} className='card'>
            <span>  
                {if artist.image}
                   <img src="{artist.image}">
                {else}
                <p>{artist.message}</p>
                  <p>LIKES <i className="fa fa-heart" aria-hidden="true"></i> {artist.likeCount }</p>
              </span>
          </li>
        )
    })
    return (
      <div className='tickerwrapper'>
        <ul className='list'>{cardList}</ul>
      </div>
    )
  }

Answer 1

您可以按照以下方式內聯：

{ myVal === true ? <div>True</div> : <div>False</div> }

例如，如果您只想在myVal為true時呈現某些內容，則可以在false的情況下返回null：

 { myVal === true ? <div>True</div> : null }

如果邏輯很大，則將其提取到一個函數中，然后在渲染器中調用它：

renderSalutation() {
  return (userLoggedOn ? <h3>Hello!</h3> : null);
}

render() {
  return (
    <div>
      { this.renderSalutation() }

      ------other renderings here

    </div>  
  );
}

Answer 2

您需要在JSX代碼中使用有效的表達式。 if-else-statement不是，但是您可以使用三元運算符：

var cardList = this.props.artists.map(function(artist, index) {
    return(
        <li key={index} className='card'>
            <span>  
                {artist.image ? (
                    <img src="{artist.image}">
                ) : (
                    <p>{artist.message}</p>
                    <p>LIKES <i className="fa fa-heart" aria-hidden="true"></i> {artist.likeCount}</p>
                )}
            </span>
        </li>
    )
})

您可以在react docs中找到有關條件渲染的更多信息。

Answer 3

可以使用if / else完成。 如React網站所示：

function NumberDescriber(props) {
  let description;

  if (props.number % 2 == 0) {
    description = <strong>even</strong>;
  } else {
    description = <i>odd</i>;
  }
  return <div>{props.number} is an {description} number</div>;
}

只需在渲染函數中執行類似的操作即可。 有條件地為您想要的組件設置一個值，然后在{}中呈現它。