意外关键字&#39；this&#39；reactjs JSX [英] Unexpected keyword 'this' reactjs jsx

问题描述

我对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;

推荐答案

显式返回JSX时不能返回运算符，请将代码放在Fragment中：

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

或删除分隔符：

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

这篇关于意外关键字&#39；this&#39；reactjs JSX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！