如何在反应中从功能组件调用服务类方法答案

【问题标题】：How to call service class method from functional component in react如何在反应中从功能组件调用服务类方法
【发布时间】：2020-10-24 03:11:58
【问题描述】：

我有一个 OIDC 客户端服务

export class AuthService {
    public userManager: UserManager;
    private user: any = null;

    constructor() {
        const settings = this.getClientSettings();
        this.userManager = new UserManager(settings);
    }

    public isLoggedIn(): boolean {
        return this.user != null && this.user.access_token && !this.user.expired;
    }

    loadUser() {
        this.userManager.getUser().then((user) => this.user = user);
    }

    public getUser(): Promise<User | null> {
        return this.userManager.getUser().then((user) => this.user = user);
    }

    public login(): Promise<void> {
        return this.userManager.signinRedirect();
    }
}

功能组件

export default function NavMenu() {
    
    useSelector((state: ApplicationState) => state.oidcUser);
    const dispatch = useDispatch();
    const [state, setState] = useState({
        menu: {
            open: true,
            coordinates: undefined
        }
    });
    const onClose = () => {
        setState({
            ...state, menu: {
                open: false,
                coordinates: undefined
            }
        })
    }
    authService: AuthService;
const login = () => {
    authService.startAuthentication(window.location.pathname);
};

    const menuOptions = [
        'Save',
        'Edit',
        'Cut',
        'Copy',
        'Paste',
      ];

    return (<div>
        <TopAppBar>
            <TopAppBarRow>
                <TopAppBarSection align='start'>
                    <TopAppBarTitle>Falcon</TopAppBarTitle>
                </TopAppBarSection>
                <TopAppBarSection align='end' role='toolbar'>
                    <div>
                        {(() => {
                            if (true) {
                                return (
                                    <Button raised type="button" onClick={() => { login }}>Portal</Button>
                                )
                            } else {
                                return (
                                    <Menu
                                        open={state.menu.open}
                                        onClose={onClose}
                                        coordinates={state.menu.coordinates}
                                        onSelected={(index, item) => console.log(index, item)}>
                                        <MenuList>
                                            {menuOptions.map((option : any, index : any) => (
                                                <MenuListItem key={index}>
                                                    <MenuListItemText primaryText={option} />
                                                    {/* You can also use other components from list, which are documented below */}
                                                </MenuListItem>
                                            ))}
                                        </MenuList>
                                    </Menu>
                                )
                            }
                        })()}
                    </div>
                </TopAppBarSection>
            </TopAppBarRow>
        </TopAppBar>
    </div>);
}

试图打电话

authService: AuthService;
    const login = () => {
        authService.startAuthentication(window.location.pathname);
    };

收到错误找不到名称 authService

如何从 react 功能组件中调用服务类方法。

【问题讨论】：

authService: AuthService; 我不认为这在 React 功能组件中是有效的。你必须来自 angular :)
你可以在顶部导入AuthService并使用它
AuthService 不是一个组件，它是一个服务调用。我想从 NavMenu 组件调用 AuthService

标签： reactjs react-hooks react-component react-functional-component

【解决方案1】：

在这里，你可以在你的函数组件中做这样的事情：

import * as React from "react";    
import { AuthService } from "./AuthService";

export default function NavMenu() {
  const authService = new AuthService();

  const login = () => {
    authService.startAuthentication(window.location.pathname);
  }

  return (
    <div className="App">
      <h1>Hello NavMenu</h1>
    </div>
  );
}

如果您还有其他问题，我们很乐意提供帮助！

【讨论】：