如何在React Hooks中发送道具来声明其他组件

Question

我想将道具发送到其他组件状态，但它不起作用。。。为什么？

    const Footer = (props) => {
    const [open, setOpen] = useState(false);

    return (
        <>
            <Test {...props} />
        </>
    );
}
const Test = (props) => {
    const [testState, setTestState] = useState(props);
    console.log(testState);
    return (
        <>
        </>
    );
}
export default Test;

我得到未定义的值

Answer 1

解决方案：

import * as React from "react";
import { useState } from "react";

将这两行添加到代码的顶部

并像这样调用页脚组件
<Footer name={"Hello"} />

import * as React from "react";
import { useState } from "react";
const Footer = (props) => {
    const [open, setOpen] = useState(false);
    return (
        <>
            <Test {...props} />
        </>
    );
};
const Test = (props) => {
    const [testState, setTestState] = useState(props);
    console.log(testState);
    return <></>;
};
export default Test;

Answer 2

const Footer = (props) => {
    const [open, setOpen] = useState(false);
    return (
        <>
            <Test {...props} open={open} />
        </>
    );
}

1、你应该从Footer组件中检查道具

2，也许你应该像这样把页脚状态发送到测试组件？

Answer 3

您在哪里调用Footer组件？如果您没有将任何道具传递给

 <Footer />

像一样吗

<Footer propname="somevalue" /> 

然后它会将道具记录到控制台。

Answer 4

我知道您正在将道具从Footer组件发送到Test组件，然后在Test组件的状态中使用相同的道具。这使得Footer作为父组件，Test作为子组件。但最终的导出语句并没有考虑父组件(页脚(。我假设您在页面中使用页脚组件像

<Footer notes="Sample Notes"/>

如果不是，那么props是未定义的。尝试发送一些属性并查看。

另外，尝试将最后一行更改为

export default Footer