如何基于组件内部的 onclick 显示/隐藏 array.map() 项

Question

我想根据 P_Gamestate 属性显示/隐藏 JSX 的一部分。如果这正在进行中，我们将只显示我们单击的组件。否则其他一切都应该隐藏起来。这很困难，因为.map() 指的是播放列表中的所有元素。我怎样才能做到这一点？ 目前它会隐藏我点击的组件，但其他所有内容都将保持显示。

challenge.js：

export default function Challenges()
{
    const [P_gameState, P_setGameState] = useState(GAME_STATE.BEFORE);

    useEffect(() => {
        async function getPlaylists() {
           let querySnapshot =  await firestoreRef
            .collection('challenge_test')
            .get();
            querySnapshot.forEach(function(data) {
                playlist.push([useful data]);
            });
        }
        getPlaylists();

    },[]);
    return(
        <div>
            <header>
                {console.log("rendering component...")}
                {playlist.map((row)=> (

                        <CardComponent key={row[0]}
                                       name={row[0]}
                                       image={row[1]}
                                       creator={row[2]}
                                       challengeID={row[3]}
                                       P_gameState={P_gameState}
                        />
                )
                )
}         
        </div>
    );
}

卡片组件.js

function CardComponent(props) {
    const [gameState, setGameState] = useState(GAME_STATE.BEFORE);

    const onClick = () => {
        console.log(props.history);
        props.history.push("/playchallenge");
    };
    return (
        <div>
        { gameState === GAME_STATE.BEFORE &&
        <div className='card-component'>
            <Button onClick={() => setGameState(GAME_STATE.IN_PROGRESS)}>
                <img
                    className="playlist-image"
                    src={props.image}
                    alt={props.name} />
            </Button>
            <h3 className='playlist-title'>{props.name}</h3>
            <h4 className='playlist-creator-text'>Created by {props.creator}</h4>
        </div>
    }
     { gameState === GAME_STATE.IN_PROGRESS &&   <FetchData />}
</div>

    )
}

Answer 1

如果你想在 JSX 中做条件渲染，你有多种方法：

1. 在map 函数回调中进行分支

array.map(item => {
  if (!condition) {
    return null;
  }
  return <Component {...props} />;
});

1. 在组件渲染函数内部进行分支（类似于方法一）
2. 在map 之前调用array.filter（这将每次都创建一个过滤后数组的新副本）
3. 内联 If 与逻辑 && 运算符

array.map(item => condition && <Component {...props} />);

5. 内联 If 和条件（三元）运算符

array.map(item => condition? <Component {...props} />: <SomethingElse />);

============

如果您希望内部组件中发生某些事件来更新条件，请使用事件道具

<CardComponent onClick={() => { /* do something with your game state */ }} />