将道具传递给子功能组件

Question

我正在尝试传递 auth 变量和一个函数来切换 true 和 false，这样我就可以根据他的状态控制为用户显示的内容，他是否授权

我得到这个错误，即使我认为一切都很好..还有我用于 class 组件的相同代码并且它有效并且我可以 console.log(props) 在渲染函数旁边..我我想我在这个功能组件中遗漏了一些东西..我需要另一只眼睛看看这个并告诉我哪里出了问题

loginButtons.js:10 Uncaught TypeError: Cannot read property 'props' of undefined
    at onClick (loginButtons.js:10)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
    at executeDispatchesAndRelease (react-dom.development.js:3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
    at forEachAccumulated (react-dom.development.js:3259)
    at runEventsInBatch (react-dom.development.js:3304)
    at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
    at handleTopLevel (react-dom.development.js:3558)
    at batchedEventUpdates (react-dom.development.js:21871)
    at batchedEventUpdates (react-dom.development.js:795)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority (react-dom.development.js:11039)
    at discreteUpdates (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

这是我的 home.js

import React, { Component } from "react";

import { GoogleLoginButton } from "./loginButtons";
import MenuBarApp from "./menuBarApp";

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            auth: true,
        };
    }

    authStatus(status) {
        this.setState({ auth: status });
    }

    render() {
        const { auth } = this.state;
        return (
            <div>
                {auth ? (
                    <MenuBarApp auth={this.state.auth} authStatus={this.authStatus.bind(this)} />
                ) : (
                    <GoogleLoginButton auth={this.state.auth} authStatus={this.authStatus.bind(this)} />
                )}
            </div>
        );
    }
}

export default Home;

这是loginButtons.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

export function GoogleLoginButton(props) {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <Button variant="contained" size="large" color="primary" onClick={() => this.props.authStatus(true)}>
                Login with your Google Account
            </Button>
        </div>
    );
}

const useStyles = makeStyles((theme) => ({
    root: {
        "& > *": {
            margin: theme.spacing(1),
        },
    },
}));

Answer 1

你不必使用，this.props在功能组件中，props可用作功能参数。

仅在 class 组件中，props 被访问为 this.props。

export function GoogleLoginButton(props) {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <Button variant="contained" size="large" color="primary" onClick={() => props.authStatus(true)}>
                Login with your Google Account
            </Button>
        </div>
    );
}

Answer 2

在loginButton.js中将this.props.authStatus(true)}更改为props.authStatus(true)} 因为它是功能组件而不是基于 class 的组件。

export function GoogleLoginButton({authStatus}) {
const classes = useStyles();
    return (
            <div className={classes.root}>
                <Button variant="contained" size="large" color="primary" 
                 onClick={() => authStatus(true)}>
                    Login with your Google Account
                </Button>
            </div>
        );
  }

You can use Destructuring.

将道具传递给子功能组件

passing props to a child functional component

reactjs

react-props

react-functional-component