Передача реквизита из компонента в comp onet с использованием реактивных хуков - PullRequest
Новая
       7

Передача реквизита из компонента в comp onet с использованием реактивных хуков

0 голосов
/ 09 января 2020

У меня есть компонент 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);

Ответы [ 3 ]

2 голосов
/ 10 января 2020

Спасибо за обновление вашего вопроса. Ответ user8544110 является правильным с точки зрения перемещения состояния в дочерний компонент, иначе, если у вас было более одного ProfileTable , переключение одного из которых приведет к переключению всех.

ProfileTable имеет isOpen как неопределенное, поскольку функциональные компоненты передают только один параметр для реквизитов, который является объектом всех реквизитов, переданных ему. Поэтому вы можете выбрать isOpen следующим образом: 

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

Или, используя функции стрелок, вы можете: 

    const ProfileTable = ({ classes, isOpen }) => { 
        ...
    }
1 голос
/ 09 января 2020

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. Надеюсь, это поможет.

0 голосов
/ 09 января 2020

Используйте isOpen как состояние компонента, который является родительским для ProfileDetails и ProfileTable , и реализуйте функцию переключения в этом компоненте. Передать ссылку функции переключения на ProfileDetails . Также передайте isOpen в ProfileTable . Теперь вы можете переключать значение isOpen из компонента ProfileDetails и использовать это значение в компоненте ProfileTable .

...