如果您正在为您的投资组合进行这方面的工作，那么遵循良好的代码标准就显得尤为重要。
你所做的内嵌式是绝对可怕的。任何一个像样的工程师如果看到这样的代码都会扔掉你的简历。
把你的样式放在一个css/scss/etc.文件中，然后导入到组件中。或者有一个基本样式表，然后在那里做所有的事情。或者使用样式化的组件。
或绝对最小值，提取样式变量，以便返回方法可读。例如：

const style = { ... }

return <div style={style}/>

但是我只对稀疏样式进行这种处理，这种样式是以组件属性/状态为条件的。
我的首选是让每个组件都在自己的文件夹中（components文件夹中），并且在该文件夹中有index.tsx和styles.scss，我们在其中从index.tsx导出组件，而该组件导入styles. scss。
对每一个组件。如果有意义的话。但是有很多可以接受的方法。
此外，我会考虑切换到TypeScript -现在绝大多数商业项目都在为他们的项目使用它。
不管怎样，就你的问题而言：
假设您永远不想使用查询选择器是正确的，几乎99.9%的情况下都不想使用。
要很容易地解决这个问题，您可以将逻辑移到Projects中，而不是Card组件中。
就像在项目：
const [翻转卡索引，设置翻转卡索引] =使用状态（未定义）;
然后将onclick函数传递给Card组件（它调用setFlippedCardIndex（idx）），沿着另一个属性（例如isFlipped），根据flippedCardIndex是否等于.map（）中卡片的索引来决定是否要显示：如果索引不等于flippedCardIndex，则隐藏。
然后去掉Card中翻转的状态变量。
可能是个更好的办法，但那会有用的。

我为你简化了这个过程。当点击一张卡片时，只显示该卡片而不隐藏其他卡片：

import { ReactElement } from 'react';

import * as React from 'react';

const cards = Array.from({ length: 5 }).map((item, index) => ({
  title: `Item ${index}`,
}));

export default function App(): ReactElement {
  const [showingCard, showCard] = React.useState<number | null>(null);
  function toggleDisplayCard(index) {
    showCard((prev) => (prev === index ? null : index));
  }
  return (
    <div style={{ display: 'flex', gap: '0.5em' }}>
      {showingCard!==null ? (<Card
          isShown={true}
          title={cards[showingCard].title}
          onClick={() => toggleDisplayCard(showingCard)}
        />) : cards.map(({ title }, index: number) => (
        <Card
          title={title}
          onClick={() => toggleDisplayCard(index)}
        />
      ))}
    </div>
  );
}

function Card({
  title,
  onClick,
  isShown
}: {
  isShown?: boolean;
  title: string;
  onClick: any;
}): ReactElement {
  return (
    <div
      style={{
        cursor: 'pointer',
        border: isShown ? '2px solid yellowgreen' : '1px solid silver',
        display: 'flex',
        padding: '1rem',
      }}
      onClick={onClick}
    >
      {title}
    </div>
  );
}

你需要记住，以防止浪费渲染使用React。备忘录，React。使用备忘录，React。使用回调在生产中以正确的方式。

也许这不是最有效的方法，因为我在每次点击卡片时都调用一次迭代，但它似乎很有效！
也只用了几行代码。下面是我的解决方案：

const Hider = (id) => {
    click++
    for (let i = 0; i < cards.length; i++) {
      cards[i].classList.add("hidden")
    }
    cards[id].classList.remove("hidden")
    if (click % 2 == 0){
      for (let i = 0; i < cards.length; i++) {
        cards[i].classList.remove("hidden")
      }
    }
  }