Question

我正在尝试使用useState挂钩来确定模式是否打开。

我在父组件中拥有这个。

    const handleState = (e) => {
        setModalOpen(e);
    };

    const [ modalOpen, setModalOpen ] = useState(true);

我目前正在按照以下步骤进行操作

    return (
        <ListWrapper>
            {therapies.map((e, i) => {
                return (
                    <div ref={(e) => (ref.current[i] = e)}>
                        <CardVertical
                            title={e.title}
                            info={e.info}
                            img={e.img}
                            imgAlt={e.imgAlt}
                            functions={[ modalOpen, handleState ]}
                        />
                    </div>
                );
            })}
            <Modal
                img={therapies[0].img}
                imgAlt={therapies[0].imgAlt}
                title={therapies[0].title}
                info={therapies[0].info}
                functions={[ modalOpen, handleState ]}
            />
        </ListWrapper>
    );

在模态中，我正在获取并使用像这样的钩子。

const Modal = ({ img, imgAlt, title, info, functions }) => {
    const [ open, setOpen ] = functions;

<Button
  onClick={() => {
    if (functions.modalOpen) {
        setOpen(false);
    }
  }}

我可以阅读公开罚款。但是我似乎无法调用该函数。

我的想法是，我将根据在元素数组中单击的元素来更改模态上的信息。可能是通过在元素之间传递更多状态。

我正在考虑也许改用上下文，因为这似乎变得越来越复杂。

Answer 1

您可以像这样分别传递modalOpen和handleState

<Modal
    mg={therapies[0].img}
    imgAlt={therapies[0].imgAlt}
    title={therapies[0].title}
    info={therapies[0].info}
    isOpen={modalOpen}
    toggleModal={handleState}
 />

并在Modal组件中将其用作

const Modal = ({ img, imgAlt, title, info, isOpen, toggleModal }) => {

<Button
  onClick={() => {
    if (isOpen) {
        toggleModal(false);
    }
}}

Answer 2

实际上，您不需要分别传递modalOpen和handleState。无论如何它应该工作。

此外，您无需定义新方法即可设置setter函数。下面完全没有必要。

const handleState = (e) => {
        setModalOpen(e);
    };

https://codesandbox.io/s/pass-usestate-to-child-c0qx6

Answer 3

您遇到的问题是您要传递一个数组作为functions道具的值，但是您试图检查functions.modalOpen好像它是一个非数组对象。这样，您将需要检查functions[0]。您可能想像这样更改您要传递的内容：

functions={{ modalOpen, handleState }}

然后，您可以像完成操作一样functions.modalOpen。

这就是说，这可能不是正确的解决方法。 modalOpen似乎是布尔值，而不是函数，在任何情况下都不需要将其包装在对象中。 Hemanath’s answer provides a good example of this.。

如何将useState挂钩传递给功能组件中的子道具

3 个答案: