意外的关键字'this'reactjs jsx [重复]

Posted 2023-02-21

【中文标题】意外的关键字\'this\'reactjs jsx [重复]

【英文标题】：Unexpected keyword 'this' reactjs jsx [duplicate]意外的关键字'this'reactjs jsx [重复]

【发布时间】：2019-12-07 21:41:58

【问题描述】：

我是 reactjs 新手。我试图在渲染返回方法中设置一个条件来显示组件。 我收到以下错误。

./components/Layouts/Header.js
SyntaxError: /home/user/Desktop/pratap/reactjs/society/society-front/components/Layouts/Header.js: Unexpected keyword 'this' (14:8)

  12 |   render() 
  13 |     return (
> 14 |        this.props.custom ? <CustomStyle /> : <DefaultStyle /> 
     |         ^
  15 |     );
  16 |   
  17 | 

这是我的组件代码 -

import React from "react";
import CustomStyle from "./CustomStyle";
import DefaultStyle from "./DefaultStyle";

class Header extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      custom:this.props.custom
    
  
  render() 
    return (
       this.props.custom ? <CustomStyle /> : <DefaultStyle /> 
    );
  


export default Header;

【参考方案1】：

当你显式返回 JSX 时，你不能返回一个运算符，将你的代码包装在一个 Fragment 中：

  render() 
    return (
      <> this.props.custom ? <CustomStyle /> : <DefaultStyle /> </>
    );
  

或者去掉分隔符：

render()
    return this.props.custom ? <CustomStyle /> : <DefaultStyle />

【讨论】：

删除分隔符是比使用丑陋片段更好的方法。谢谢