如何在reactjs+；打字脚本（钩子）

我是打字新手。我需要在一个按钮上使用ref来更新reducer值，从而将子状态值传递给父级

我已尝试将

ref

传递给孩子，但我得到的错误与此类似：

类型“{value:string；onChange:Dispatch；ref:mutableReObject；}” 不可分配给类型“IntrinsicattAttributes&Props&{children？：ReactNode；}”

属性“ref”在类型“IntrinsicattAttributes&Props&{children？：ReactNode；}”上不存在。ts（2322）

父组件

import React, from "react";
import styled from "styled-components";
import {
    Page,
    Welcome,
    ErrorBoundary
} from "components";
const ParentDiv = styled.div`
            margin: 0 410px 30px 15px;
            `;

export const CreateEvent = (props: any) => {

    return (
        <Page title='Dashboard'>
            <ErrorBoundary>
                {(() => {
                    switch (activeEventStage?.step) {
                        case 1:
                            return (
                                <ErrorBoundary>
                                    <Welcome />
                                </ErrorBoundary>
                            );
                        default:
                            return null;
                    }
                })()}
            </ErrorBoundary>
        </Page>
    );
};
export default withRouter(CreateEvent);

import React, { useState } from "react";
import { Row, Col } from "react-bootstrap";

export const Welcome = () => {
    const { t } = useTranslation();
    const [state, setState] = useState({
        welBannerTagline: "",
        welHeroTitle: "",
    });

    return (
        <CreateEventFormContainer
            title={t("event.create.title")}
            subTitile={t("welcome.subTitle")}
        >
            <>
                <Row>
                    <Col lg='6'>
                        <DropZoneInputField
                            titleName={t("welcome.bgImage.title")}
                            onSelectedFiles={onDropFiles}
                            imageType='bgImage'
                            value={state.welBgFilename}
                        />
                    </Col>
                    <Col lg='6'>
                        <DropZoneInputField
                            titleName={t("welcome.banner.title")}
                            onSelectedFiles={onDropFiles}
                            imageType='bannerImage'
                            value={state.welBannerFilname}
                        />
                    </Col>
                </Row>
            </>
        </CreateEventFormContainer>
    );
};
export default Welcome;

从“React”导入React；
从“样式化组件”导入样式化；
进口{
页
欢迎
错误边界
}来自“组件”；
const ParentDiv=styled.div`
利润率：0 410px 30px 15px；
`;
导出常量CreateEvent=（道具：任意）=>{
返回(
{(() => {
开关（activeEventStage？.step）{
案例1：
返回(
);
违约：
返回null；
}
})()}
);
};
使用路由器导出默认值（CreateEvent）；

子组件

import React, from "react";
import styled from "styled-components";
import {
    Page,
    Welcome,
    ErrorBoundary
} from "components";
const ParentDiv = styled.div`
            margin: 0 410px 30px 15px;
            `;

export const CreateEvent = (props: any) => {

    return (
        <Page title='Dashboard'>
            <ErrorBoundary>
                {(() => {
                    switch (activeEventStage?.step) {
                        case 1:
                            return (
                                <ErrorBoundary>
                                    <Welcome />
                                </ErrorBoundary>
                            );
                        default:
                            return null;
                    }
                })()}
            </ErrorBoundary>
        </Page>
    );
};
export default withRouter(CreateEvent);

import React, { useState } from "react";
import { Row, Col } from "react-bootstrap";

export const Welcome = () => {
    const { t } = useTranslation();
    const [state, setState] = useState({
        welBannerTagline: "",
        welHeroTitle: "",
    });

    return (
        <CreateEventFormContainer
            title={t("event.create.title")}
            subTitile={t("welcome.subTitle")}
        >
            <>
                <Row>
                    <Col lg='6'>
                        <DropZoneInputField
                            titleName={t("welcome.bgImage.title")}
                            onSelectedFiles={onDropFiles}
                            imageType='bgImage'
                            value={state.welBgFilename}
                        />
                    </Col>
                    <Col lg='6'>
                        <DropZoneInputField
                            titleName={t("welcome.banner.title")}
                            onSelectedFiles={onDropFiles}
                            imageType='bannerImage'
                            value={state.welBannerFilname}
                        />
                    </Col>
                </Row>
            </>
        </CreateEventFormContainer>
    );
};
export default Welcome;

import React，{useState}来自“React”；
从“react bootstrap”导入{Row，Col}；
导出常量欢迎=（）=>{
const{t}=useTranslation（）；
常量[状态，设置状态]=使用状态({
韦尔班纳格列奈：“，
欢迎:",，
});
返回(
);
};
出口默认值欢迎；

之所以会出现此错误，是因为

欢迎

的设计目的不是接受

ref

道具

ref

是React中的保留道具名称，因此为了将道具

ref

传递给子组件，该子组件必须使用该道具来接受

ref

道具

您可以使用任何其他道具名称直接传递ref对象，例如

myRef

。在这种情况下，您不需要使用

forwardRef

，但需要确保孩子的道具接受一个道具

myRef

，它是一个ref

ref本身的类型取决于它最终连接到DOM的位置。可能是一个

HTMLButtonElement

interface WelcomeProps {
    myRef: React.MutableRefObject<HTMLButtonElement | null>;
}

export const Welcome = ({myRef}: WelcomeProps) => {
...

export const CreateEvent=（props:RouteComponentProps）=>{
返回(
...
{
//在这里做一些有价值的事情
}} />
...

你在哪里使用useRef？我在上面的代码中没有看到它。我已经删除了它，因为它破坏了我的工作，我只需要在钩子中使用typescript来获取子状态值的解决方案

export const CreateEvent = (props: RouteComponentProps) => {
    return (
...
       <Welcome myCallback={(value) => {
           // do something here with the value
       }} />
...