如何使用条件语句呈现JSX元素？

Question

我想在加载数据时渲染html元素。

render() {
  return (
    <div>
      ...
    { this.state.isLoaded ?
     (
        <ReviewShortIntro review={this.state.mainReview} />
        <div className="clear" />
        <div className="section-title"></div>
        <ReviewList reviews={this.state.reviews} />
     )
   }
  </div>
);

但这显示如下错误。

SyntaxError：这是一个保留字（60:35）

第60行是

<ReviewShortIntro review={{this.state.mainReview}} />

没有条件标志（在代码中，this.state.isLoaded），我必须检查审查的所有属性是否未定义。

我不熟悉反应。

解决问题的最佳方法是什么？

Answer 1

您的三元运算符不完整，您只有左侧。你错过了: null部分。

您需要在父元素中包含多个元素，以便只返回单个元素。例如，用<div>包裹：

render() {
  return (
    <div>
      ...
    { this.state.isLoaded ?
     (
        <div><ReviewShortIntro review={this.state.mainReview} />
        <div className="clear" />
        <div className="section-title"></div>
        <ReviewList reviews={this.state.reviews} /></div>
     ) : null
   }
  </div>
);

Answer 2

根据documentation使用&&运算符，你应该将它包装在一个单独的元素中。我建议使用不产生不必要的dom元素的Fragment：

import React, { Fragment } from 'react';

render() {
  return (
    <div>
      ...
    {this.state.isLoaded && (
       <Fragment>
         <ReviewShortIntro review={this.state.mainReview} />
         <div className="clear" />
         <div className="section-title"></div>
         <ReviewList reviews={this.state.reviews} />
       </Fragment>
     )
   }
  </div>
);

Answer 3

替换这个：

<ReviewShortIntro review={{this.state.mainReview}} />

有了这个：

<ReviewShortIntro review={this.state.mainReview} />

但是，我在帖子中看不到使用{{}}，只是看到你的错误信息。因此，您需要确认您在单个花括号内使用this.state.mainReview。

双花括号意味着你要定义一个对象。对象有key:value对。所以，使用{{this.state.mainReview}}将导致你这样的错误，因为没有这样的key:value对。

虽然，它可能是一个拼写而不是你的代码。刚刚回答，告知调用一个函数或任何状态应该包装在一个大括号内。

---

啊，是的，你的三元运算符是不完整的。使用&&运算符或完成三元运算符：

{ this.state.isLoaded ?
     (
        <ReviewShortIntro review={this.state.mainReview} />
        <div className="clear" />
        <div className="section-title"></div>
        <ReviewList reviews={this.state.reviews} />
     ) : ''
   }