条件下的ReactJs组件意外令牌错误[重复]

Posted 2023-02-21

【中文标题】条件下的ReactJs组件意外令牌错误[重复]

【英文标题】：ReactJs Component Unexpected Token error on condition [duplicate]

【发布时间】：2018-08-17 20:48:26

【问题描述】：

我正在尝试检查道具是否为空并向反应组件添加条件。

代码如下：

class Mycomp extends Component 

    render() 
        return (
            <div className="Mycomp">
                this.props.title
                if (this.props.title != '') 
                    console.log('Title is not empty');
                
            </div>
        );
    

问题是我收到了 Unexpected Token 错误。

我该如何解决这个问题？

【问题讨论】：

将if 条件移到return 语句之前。 （并使用!== btw）

你不能拥有if statement in your JSX

this.props.title || console.log("title is empty")

【参考方案1】：

你的 JSX 中不能有这样的 if 语句。您最好使用车削操作员或执行以下操作：

return (
  <div className="Mycomp">
        this.props.title ||'' 
  </div>
);

【参考方案2】：

你不能有 if-else 语句作为回报，使用三元运算符

class Mycomp extends Component 

    render() 
        if (this.props.title != '') 
            console.log('Title is not empty');
        
        return (
            <div className="Mycomp">
                this.props.title
                this.props.title? 'Something here': 'Else something'
            </div>
        );
    

【参考方案3】：

另一种选择是使用逻辑运算符 &&

class Mycomp extends React.Component 
  render() 
    const title = this.props.title
    return (
      <div className="Mycomp">
          title && title 
      </div>
    );
  
  

【讨论】：

或者... title