React：render函数中的条件语句

Question

我有一个包含不同艺术家的对象数组。根据每个对象中是否有图像，我想显示不同的内容。

我尝试在我的渲染方法中使用 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>
    )
  }

- user6002037

Answer 1

你可以内联类似以下的内容：

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

如果，例如你只想在myVal为真时渲染某些内容，那么如果它为假，你可以返回null：

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

如果逻辑比较复杂，只需将其提取到一个函数中，并从渲染函数中调用该函数：

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

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

      ------other renderings here

    </div>  
  );
}

- Mark Williams

---

请注意，myVal === true 可以简写为 myVal。 - TimoStaudinger

当然 - 为了清晰起见，我将其保留在这里，因为myVal（希望显而易见）是虚构的。 - Mark Williams

我不确定这是否是一个好的实践，但有时我利用render是一个函数这一事实，在其主体中将视图的部分作为变量有条件地准备好，然后在返回语句中连接它们。这样，如果不需要重复使用，我就避免了创建一个函数。 - Cithel

Answer 2

在你的JSX代码中，你需要使用一个有效的表达式。if-else语句不是有效的表达式，但是你可以使用三目运算符：

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文档中条件渲染中找到更多的信息。

- TimoStaudinger

---

可以用 if/else 语句在其他地方完成吗？ - user6002037

当然，你可以这样做：if(artist.image) { return (...) } else { return (...)}。只要确保将 if-else 语句放在 JSX 代码之外即可。不过，在此过程中往往会失去一些可读性。 - TimoStaudinger

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

只需在您的渲染功能中执行类似操作。有条件地将值设置为所需组件，然后在{}内呈现它。

- kjonsson