将图像添加到 ToggleButtonGroup

Question

我想实现这个设计：

我目前有点卡在图片-答案部分。

我有想法，但是有个问题

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

type GameAnswersProps = {
    arrayAnswers: Array<string>,
    arrayAnswersImages?: Array<string>,
    correctAnswer: string,
    setFinishedGameHandler: Function
}

function GameAnswers(props: GameAnswersProps) {
    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) {
            props.setFinishedGameHandler(true);
            return "success";
        } else {
            props.setFinishedGameHandler(false);
            return "danger";
        }
    }

    return (
        <div className="game-answers">
            {
                props.arrayAnswersImages === undefined ?
                    <GameImage className="game-details-image" images={[{ imgSrc: "/Untitled.png", imgAlt: 'test' }]} /> :
                    ""
            }
            <ToggleButtonGroup type="radio" name="answers">
                {props.arrayAnswers.map(function (answer, index) {
                    return <div>
                        {props.arrayAnswersImages !== undefined ?
                            <GameImage className="game-togglebutton" images={[{ imgSrc: props.arrayAnswersImages[index], imgAlt: 'test' }]} /> : ""
                        }
                        <ToggleButton
                            id={answer}
                            value={answer}
                            onChange={handleAnswerChange}
                            variant={determineButtonVariant(answer)}
                        >{answer}</ToggleButton>
                    </div>
                })}
            </ToggleButtonGroup>
        </div>
    );
}

export default GameAnswers;

因为地图函数 return 是 div，我的 ToggleButton 无法正常工作。如果我点击按钮，什么也不会发生。

如果我删除 div 包装，我会得到一个错误，因为我 return 两个组件。

如果我也删除 GameImage 组件，一切都会正常，但文本上方将没有图像。

那么，当 ToggleButton 上方的图像仍然存在时，如何使我的代码正常工作？

Answer 1

在 React 中您可以使用 Fragments，这是在
时排除该额外节点的常用方法，例如返回列表。

将包装 <div></div> 标签更改为 -> <React.Fragment></React.Fragment>.

一个较短的语法是<></>。

将图像添加到 ToggleButtonGroup

Adding an image into a ToggleButtonGroup

typescript

reactjs

react-bootstrap