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中），我必须检查review的所有属性是否未定义。

我不熟悉反应。

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

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使用&&运算符，您应该将其包装在单个元素中。我建议使用Fragment，它不会生成不必要的dom元素：

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} />
     ) : ''
   }

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

3 个答案: