时间戳

首页 > 解决方案 > 如何在 Reactjs 中的功能组件之间传递值？

javascript - 如何在 Reactjs 中的功能组件之间传递值？

问题描述

SignInOutlookAccount我试图在两个功能组件（ & ）之间传递 isAuthenticated 值，SignInOutlookButton但我无法获得它的值。

我怎样才能把isAuthenticatedvaule 从SignInOutlookAccount.jsx到SignInOutlookButton.jsx？

登录OutlookAccount.jsx

export const getUserProfile = async (props) => {
console.log("im inside getUserProfile");

try {
    var accessToken = await userAgentApplication.acquireTokenSilent({
        scopes: config.scopes
    });
    console.log("im inside tryyyyyy");

    if (accessToken) {
        var user = await getUserDetails(accessToken);

        props = {
            isAuthenticated: true,
            user: {
                displayName: user.displayName,
                email: user.mail || user.userPrincipalName,
                accessToken: user.accessToken
            },
            error: null
        };
    }
    } catch (err) {
    var error = {};
    if (typeof err === "string") {
        var errParts = err.split("|");
        error =
            errParts.length > 1
                ? { message: errParts[1], debug: errParts[0] }
                : { message: err };
    } else {
        error = {
            message: err.message,
            debug: JSON.stringify(err)
        };
    }

    props = {
        isAuthenticated: false,
        user: {},
        error: error
    };
}

登录OutlookButton.jsx

export const SignInOutlookButton = ({props}) => {
 return <Button text={isAuthenticated ? 'Sign In' : 'Sign Out'} startIcon={<Mail />} onClick={()=> login(props)} />;
};

CustomComponents.jsx

export const CustomComponents = props => {
return (<SignInOutlookButton/>);

};

标签： javascriptreactjs

解决方案

在你的SignInOutlookButton你正在解构props以获得一个名为props. 不要那样做。这将寻找一个名为props. 您很可能不会像这样调用组件：<SignInOutlookButton props={...myProps} />如果是，请不要。

将函数声明更改为正确后：

export const SignInOutlookButton = (props) => {

你可以isAuthenticated通过 props 访问：text={props.isAuthenticated.

推荐阅读