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

Question

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

我怎样才能将isAuthenticated 值从SignInOutlookAccount.jsx 带到SignInOutlookButton.jsx？

SignInOutlookAccount.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
    };
}

SignInOutlookButton.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/>);

};

Answer 1

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

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

export const SignInOutlookButton = (props) => {

您可以通过道具访问isAuthenticated：text={props.isAuthenticated。

Answer 2

试试这个

<SignInOutlookButton isAuthenticated={isAuthenticated} />

然后像这样导出组件

export const SignInOutlookButton = (props) => {
  const { isAuthenticated } = props;

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