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

Question

>我有一个组件ProfileDetails，它具有切换功能来切换配置文件上的其他信息。我正在将ProfileDetails导入组件ProfileTable并尝试通过ProfileDetails传递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 }) => { 
...
}

Answer 2

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

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组件中使用该值。