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

我正在尝试在两个功能组件之间传递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
    };
}

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

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

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

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

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

export const SignInOutlookButton=（{props}）=>{
返回登录（道具）}/>；
};

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

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

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

---

export const CustomComponents=props=>{
返回（）；

---

})

在您的

SignInOutlookButton

中，您正在对

props

进行分解，以获得名为

props

的属性。不要那样做。这将查找名为

props

的道具。您很可能没有这样调用组件：

如果是，请不要这样做

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

export const signitlookbutton=（道具）=>{

---

您可以通过道具：

文本访问
isAuthenticated
={props.isAuthenticated

在您的

SignInOutlookButton

中，您正在对

props

进行解构，以获得名为

props

的属性。不要这样做。这将查找名为

props

的属性。您很可能没有像这样调用组件：

，如果是，请不要这样做

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

export const signitlookbutton=（道具）=>{

您可以通过道具访问

isAuthenticated

：

text={props.isAuthenticated

试试这个

<SignInOutlookButton isAuthenticated={isAuthenticated} />

然后像这样导出组件

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

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

export const signitlookbutton=（道具）=>{
const{isAuthenticated}=props；
返回登录（道具）}/>；
};

试试这个

<SignInOutlookButton isAuthenticated={isAuthenticated} />

然后像这样导出组件

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

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

export const signitlookbutton=（道具）=>{
const{isAuthenticated}=props；
返回登录（道具）}/>；
};

这回答了你的问题吗？这回答了你的问题吗？我这样调用组件。我按照你说的更改了所有内容，但是props.isAuthenticated仍然没有定义。你需要将prop传递给它：

export const CustomComponents=props=>{return（解释你的意思？在一个功能组件中是不相关的。我看到了你的更新。你必须以某种方式传递它一个值。仅仅因为你在一个组件中保存了一个变量并不能神奇地使它在另一个组件中可用。这是一个基本的范围问题。没有更多的代码，我无法进一步猜测。我假设你是用在

SignInOutlookAccount

中，我这样调用组件。我按照您所说的更改了所有内容，但是props.isAuthenticated仍然未定义。您需要向它传递prop:

export const CustomComponents=props=>{return（解释你的意思？在一个功能组件中是不相关的。我看到了你的更新。你必须以某种方式传递它一个值。仅仅因为你在一个组件中保存了一个变量并不能神奇地使它在另一个组件中可用。这是一个基本的范围问题。没有更多的代码，我无法进一步猜测。我假设你是用在

SignInOutlookAccount

中，我在另一个功能组件中调用SignInOutlookButton，我添加了上面的示例。我这样尝试了，但仍然不起作用。Brian Thompson之前的回答也很有效。我在另一个功能组件中调用SignInOutlookButton，我添加了上面的示例。我像这样尝试，并且它不起作用，仍然是未定义的。布莱恩·汤普森以前的答案也适用