我在此代码中收到解析错误：':' expected.eslint 但看不到在哪里

Question

我学习了 React，现在我完全陷入了这个荒谬的错误。

这是一张图片，在代码下方，我做错了什么？

import React from 'react';
import { useNavigate } from 'react-router-dom';
import AuthUserContext from './context';

const WithAuthorization = condition => Component => {
    class withAuthorization extends React.Component {
        constructor() {
            super();
            this.navigateAway = this.navigateAway.bind(this);
        }

        navigateAway() {
            const navigate = useNavigate();
            navigate('/');
        }

        render() {
            return (
                <AuthUserContext.Consumer>
                    {authUser => (condition(authUser) ? <Component {...this.props} /> : { this.navigateAway })};
                </AuthUserContext.Consumer>
            );
        }
    }

    return withAuthorization;
};

export default WithAuthorization;

更新

感谢@antoineso 的回答，我删除了 {} 大括号，然后它停止抱怨，但随后我收到了一个更奇怪的错误：

Answer 1

像这样删除大括号：

  {authUser => (condition(authUser) ? <Component {...this.props} /> :  this.navigateAway )};

对于 React，你传递了一个对象，这就是它要求你在 this 和 navigateAway 之间添加 : 的原因