как вызвать функцию из одного компонента в другой компонент в реакции

Question

• 1000 1006 *, может ли кто-нибудь помочь мне, как это сделать, здесь я разместил оба компонента, любая помощь будет очень признательна.

Game.tsx

import {PickWinner} from "@Areas/Game/Components/Gameplay/PickWinner";

class Game extends React.Component<RouteComponentProps<IGameParams>, IGameState>
{
    private supportDelayTimeout = 0;
    public interval;
    public interval_show_winner_counter;
    public can_we_update=0;
    public number_seconds=30;

    constructor(props: RouteComponentProps<IGameParams>) {
        super(props);

        this.state = {
            socketData: SocketDataStore.state,
            gameData: GameDataStore.state,
            userData: UserDataStore.state,
            restartLoading: false,
            restartDelayed: true,
            showSupport: false,
            chatDrawerOpen: true,
            isFirstTime: false,
            total: this.number_seconds,
            showTimer: false,
            displayTimer : '00:30',
        };
    }

    public startPickWinnerCardTimer = (winnerGuid) => {
        this.interval_show_winner_counter = setInterval(function (winnerGuid) {
            let timer =  120, minutes, seconds;
            if(typeof timer!==undefined && timer!=null) {
                minutes = parseInt(timer/60 as any,10);
                seconds = parseInt(timer%60 as any,10);
                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;
                
                console.log("show winner timer");
                console.log(minutes + ":" + seconds);

                this.setState({displayTimer:minutes + ":" + seconds})
                
                
                if (--timer < 0) {
                    pickWinner(winnerGuid);
                    this.setState({total:this.number_seconds,showTimer:false});
                    clearInterval(this.interval_show_winner_counter);
                    return false;
                } 
            }
        }, 1000);
    }

    private getWinnerFromState(state: IGameState) {
        const {
            players,
            settings
        } = state.gameData.game ?? {};

        const playerGuids = Object.keys(players ?? {});
        const roundsToWin = getTrueRoundsToWin(state.gameData.game as ClientGameItem);
        const winnerGuid = playerGuids.find(pg => (players?.[pg].wins ?? 0) >= roundsToWin);
        return winnerGuid;
    }
};

export default withRouter(Game);

PickWinner.tsx

import Grid from "@material-ui/core/Grid";
import Divider from "@material-ui/core/Divider";
import * as React from "react";
import {useState} from "react";
import {useDataStore} from "../../../../Global/Utils/HookUtils";
import {GameDataStore} from "../../../../Global/DataStore/GameDataStore";
import {WhiteCard} from "../../../../UI/WhiteCard";
import {UserDataStore} from "../../../../Global/DataStore/UserDataStore";
import sanitize from "sanitize-html";
import {LoadingButton} from "../../../../UI/LoadingButton";
import {CardId} from "../../../../Global/Platform/Contract";
import {cardDefsLoaded} from "../../../../Global/Utils/GameUtils";

export interface IPickWinnerProps
{
    children?: undefined;
    canPick: boolean;
    timeToPick: boolean;
    revealMode: boolean;
    hasWinner: boolean;
    onPickWinner?: (winnerGuid: string) => Promise<any>;
}



export const PickWinner: React.FC<IPickWinnerProps> = (

    {
        onPickWinner,
        canPick,
        timeToPick,
        hasWinner,
        revealMode
    }

) =>
{

    let interval_show_winner_counter;
    this.props.func(this, 1234);

    const gameData = useDataStore(GameDataStore);
    const userData = useDataStore(UserDataStore);
    const [pickWinnerLoading, setPickWinnerLoading] = useState(false);
    const [updateShowWinnerTimer,setUpdateShowWinnerTimer] = useState('02:00');

    const me = gameData.game?.players?.[userData.playerGuid] ?? gameData.game?.spectators?.[userData.playerGuid];

    const defsLoaded = cardDefsLoaded(gameData);

    if (!me || !gameData.game || !defsLoaded)
    {
        return null;
    }

    const pickWinner = (winnerGuid: string) =>
    {
        if (onPickWinner)
        {
            setPickWinnerLoading(true);

            onPickWinner(winnerGuid)
                .finally(() => setPickWinnerLoading(false));
        }
    };

}

Answer 1

Это обычно не способ go о вещах в React. Обычно вы хотите передать функциональность дочерним элементам в props и передать уведомления от дочерних элементов в событиях.

вы можете использовать forwardRef для этой проблемы. Попробуйте this

Также вы хотите передать какие-либо функции или уведомления от дочернего элемента, вы должны использовать Redux , чтобы уведомить о чем-либо родительский компонент.