Javascript React：呈现函数中的条件语句

我有一系列不同艺术家的作品。我想根据图像是否在单个对象中显示不同的内容

我试图在我的渲染方法中放入一个

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

render:function（）{
var cardList=this.props.artists.map（函数（艺术家，索引）{
返回(

{if artist.image}
{else}
{artist.message}

喜欢{artist.likeCount}


)
})
返回(
{cardList}
)
}

您需要在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>
    )
})

var cardList=this.props.artists.map（函数（艺术家，索引）{
返回(

{艺术家形象(
) : (
{artist.message}

喜欢{artist.likeCount}

)}

)
})

---

您可以找到有关条件渲染的更多信息。

您可以按照以下方式内联一些内容：

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

{myVal==true？true:False}

例如，如果仅希望在myVal为true时呈现某些内容，则如果myVal为false，则可以返回null：

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

{myVal==true？true:null}

如果逻辑相当大，只需将其提取到函数中，并从渲染中调用该函数：

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

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

      ------other renderings here

    </div>  
  );
}

renderSalutation（）{
return（userLoggedOn？Hello！：null）；
}
render（）{
返回(
{this.renderSalutation（）}
------这里还有其他效果图
);
}

可以用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>;
}

功能编号抄写器（道具）{
让我们描述一下；
如果（道具编号%2==0）{
description=偶数；
}否则{
描述=奇数；
}
返回{props.number}是一个{description}号；
}

---

只需在渲染函数中执行类似的操作。有条件地为所需的组件设置一个值，然后在{}内渲染。

是否也可以在其他地方使用

if/else

语句进行渲染？当然可以，例如：

if（artist.image）{return（…）}else{return（…）}

。只需确保将if-else语句保留在JSX代码之外。不过，在这个过程中，你经常会失去一些可读性。请注意，

myVal===true

可以缩写为一个简单的

myVal

。当然，为了清楚起见，还是这样吧，因为myVal是（希望很明显）编出来的。我不确定这一做法有多好，但有时我会使用render是一个函数的事实来有条件地准备视图片段作为其主体中的变量，然后在return语句中对它们进行concat。这样我就避免了在函数不可重用的情况下创建函数。