javascript - 将 props 从子组件传递给父组件

Question

我正在尝试将一些道具从孩子传递给父母，我在 Youtube 上找到了这个视频：

https://www.youtube.com/watch?v=BtImABK_VHo

我尝试实现该逻辑（第二种方法），但出现了一些错误。这是代码：

我尝试渲染的方式：

<GameAnswers arrayAnswers={['Yes', 'No']} correctAnswer="Yes" />

GameAnswers.tsx

import React, { useState } from 'react';
import { ToggleButtonGroup, ToggleButton } from 'react-bootstrap';
import './css/GameAnswers.css';

type Answers = {
    arrayAnswers: Array<string>,
    correctAnswer: string
}

function GameAnswers(props: Answers) {
    const [selectedAnswer, setSelectedAnswer] = useState("");

    const handleAnswerChange = function (e: React.ChangeEvent<HTMLInputElement>) {
        setSelectedAnswer(e.target.value);
    }

    const determineButtonVariant = function (answer: string) {
        if (answer !== selectedAnswer) {
            return "primary";
        } else if (answer === props.correctAnswer) {
            return "success";
        } else {
            return "danger";
        }
    }

    return {
        selectedAnswer,
        render: (
            <div className="game-answers">
                <ToggleButtonGroup type="radio" name="answers">
                    {props.arrayAnswers.map(function (answer) {
                        return <ToggleButton
                            id={answer}
                            value={answer}
                            onChange={handleAnswerChange}
                            variant={determineButtonVariant(answer)}
                        >{answer}</ToggleButton>
                    })}
                </ToggleButtonGroup>
            </div>
        )
    }
}

export default GameAnswers;

错误：

'GameAnswers' cannot be used as a JSX component.
  Its return type '{ selectedAnswer: string; render: JSX.Element; }' is not a valid JSX element.
    Type '{ selectedAnswer: string; render: Element; }' is missing the following properties from type 'ReactElement<any, any>': type, props, key  TS2786

视频中的这种方法有效吗？该视频来自 2021 年 8 月 1 日，所以应该是，但我收到了一些错误，如您所见，我真的不知道如何修复它们。

如果是，我错过了什么？

标签： javascriptreactjstypescript