Question

我有一个组件ProfileDetails，该组件具有切换功能，可以切换配置文件上的其他信息。我正在将ProfileDetails导入组件ProfileTable并尝试将isOpen与ProfileDetails一起传递。然后使用条件isOpen进行三元运算符。这样做时，我得到的isOpen是未定义的

ProfileDetails：

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

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

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

ProfileTable：

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 }) => { 
        ...
    }

Answer 2

isOpen是undefined，因为您的ProfileDetails组件在功能组件的定义中没有获得任何支持。如果要使用这样的组件，则应执行以下操作：

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

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

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

这样，isOpen的初始值就是您从ProfileTable传递过来的道具。希望这会有所帮助。

Answer 3

使用isOpen作为同时为 ProfileDetails 和 ProfileTable 的父级的组件的状态，并在该组件中实现切换功能。将切换功能的引用传递到 ProfileDetails 。另外，将isOpen传递到 ProfileTable 。现在，您可以从 ProfileDetails 组件中切换isOpen的值，并在 ProfileTable 组件中使用该值。

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

3 个答案: