我有以下兩個組件：為了可讀性，我將在這個問題中跳過imports 和exports資源管理器.jsconst Explorer = () => {    const [selected, setSelected] = useState('C');     let dirArr = [        <Program key={"C"} name="C" isSelected={true}/>,        <Program key={"D"} name="D" isSelected={false}/>     ];     const changeSelection = (newSelection) => {        if (selected !== newSelection){            dirArr = dirArr.map((el) => {                switch (el.props.name){                   case newSelection:                   case selected:                       return <Program key={el.props.name} name={el.props.name} isSelected={!el.props.isSelected}/>                   default:                    return el                }            });         }       setSelected(newSelection);     }    const handleClick = (e) => {        //TODO: Make sure only <Program> allowed       changeSelection(e.target.parentNode.firstElementChild.innerHTML);    }    return (        <div onClick={handleClick}>            {dirArr}                    </div>    ) }基本上我想要做的是，點擊取消選擇上一個突出顯示的組件并突出顯示新的組件。因此，在mapI'm 翻轉isSelected道具上舊selected元素和newSelection return <Program key={el.props.name} name={el.props.name} isSelected={!el.props.isSelected}/>然后這里是Program.jsconst Program = (props) => {    const [name, setName] = useState(props.name);    const [size, setSize] = useState(0);    const [date, setDate] = useState('01.01.75');    const selectedDeterminer = () => {        return props.isSelected ? { background: 'blue'} : {}    }    return (        <div style={selectedDeterminer()}>            <section className="program-name">{name}</section>            <section className="program-size">{size}</section>            <section className="program-date">{date}</section>        </div>    )}在控制臺記錄時，我確定我選擇的是元素名稱還是el.props.isSelected正確的名稱，它只是在返回的地圖上，它似乎不會影響結果