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

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

您需要在 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 中找到有关条件渲染的更多信息。

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

只需在您的渲染功能中做一些类似的事情。有条件地为您想要的组件设置一个值，然后在 {} 内渲染它。