使用反应钩子将道具从组件传递到组件

Question

我有一个ProfileDetails具有切换功能的组件，可以在配置文件上切换附加信息。我导入ProfileDetails到一个组件ProfileTable，并试图通过isOpen用ProfileDetails。然后使用条件 isOpen 执行三元运算符。这样做时，我得到 isOpen 未定义

简介详情：

function ProfileDetails() {
    const [isOpen, setIsOpen] = useState(false);

    const toggle = () => {
        setIsOpen(!isOpen);
    };

    return (
        <>
            <Button>
                <ArrowForwardIosIcon
                    size="small"
                    onClick={toggle}></ArrowForwardIosIcon>{" "}
            </Button>
            <Slider open={isOpen} />
        </>
    );
}

简介表：

import React, { useState, Fragment } from "react";
import format from "date-fns/format";
import Button from "@material-ui/core/Button";
import { withStyles } from "@material-ui/core/styles";
import DataTable from "../DataTable";
import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";
import ProfileDetails from "./ProfileDetails ";




function ProfileTable(props, isOpen) {
    const { classes } = props;



    const drawerColumns = [
        {
            name: "Name",
            label: "Name",
            options: {
                filter: true,
                sort: false,
                customBodyRender: (value, tableMeta) => {
                    return (
                        <Button size="small" onClick={() => {}}>
                            {value}
                        </Button>
                    );
                }
            }
        },
        {
            name: "Address",
            label: "Address",
            options: {
                filter: false,
                sort: true
            }
        },
        {
            name: "Zip",
            label: "Zip",
            options: {
                filter: false,
                sort: true
            }
        },
        {
            name: "",
            label: "",
            options: {
                filter: false,
                sort: false,
                customBodyRender: (value, tableMeta) => {
                    return <ProfileDetails isOpen={isOpen} />;
                }
            }
        }
    ];

    const options = {

        search: false,
        print: false,
        download: false,
        selectableRows: "multiple",
        expandableRows: false
    };

    return isOpen ? (
        <DataTable
            title="Shifts to be Approved"
            data={details}
            columns={drawerColumns}
            options={options}
        />
    ) : (
        <DataTable
            title="Shifts to be Approved"
            data={details}
            columns={columns}
            options={options}
        />
    );
}

export default withStyles(styles)(ProfileTable);

Answer 1

感谢您更新您的问题。就将状态移动到子组件而言，user8544110 的答案是正确的，否则如果您有多个ProfileTable切换一个将切换所有。

ProfileTable 的isOpen 是未定义的，因为功能组件只有一个传递给 props 的参数，它是传递给它的所有 props 的对象。因此，您可以按如下方式获取isOpen：

    function ProfileTable(props) {
        const { classes, isOpen } = props;
        ...
    }

或者使用箭头函数，您可以：

    const ProfileTable = ({ classes, isOpen }) => { 
        ...
    }