我怎么能得到子状态值父使用useRef在reactjs打字（钩子）

Question

我是打字稿的新手。我需要得到的子状态值的父使用ref上的按钮点击更新的减速器值。

我已尝试将ref传递给孩子，但我得到的错误与此类似：

类型{value:string；onChange:Dispatch

属性“ref”不存在于类型“IntrinsicatAttributes”上

父组件

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;

Answer 1

一种更简单的方法是使用内置在React中的useRef钩子与保留的refprop进行交互。它只适用于可变对象，因此您不必担心自己键入它。

import { useRef } from "react";

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

    const welcomeRef = useRef();

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

Answer 2

您会出现这个错误，因为欢迎不是为接受refprop而设计的。

ref是React中的保留道具名称，因此为了将道具ref传递给子组件，该子组件必须使用React。forwardRef接受refprop。

您可以使用任何其他道具名称直接传递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) => {
    const refObject = React.useRef<HTMLButtonElement | null>(null);
    return (
...
       <Welcome myRef={refObject}/>
...

这允许您与DOM交互。但这似乎不是你真正想要做的。

我需要得到的子状态值的父使用ref上的按钮点击更新的减速器值。

给我回个电话！该状态甚至应该存储在子级中，还是可以将其提升到父级？

interface CallbackValue {
    // what properties does the callback want to receive?
    welBannerTagline: string;
    welHeroTitle: string;
}

interface WelcomeProps {
    myCallback: (value: CallbackValue) => void;
}

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

    const handleEvent = () => {
        myCallback(state);
    }
...

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