Javascript 如何使用react中另一个文件的状态

我有一个故事书项目，并创建了一个新的自定义组件。我使用了一个悬停状态，当我悬停组件时，它会更新它的类名，并且工作正常。名称：ProductSize

然后，我创建了一个新组件来对ProductSize组件进行分组，并将其命名为ProductSizeGroup，并在ProductSizeGroup故事中通过Json对它们进行分组

这是最终产品屏幕：

在这里，我想看到的大小，当我悬停的方块。但是，它向我展示了所有的尺寸，就像这样。显然，我只想在将鼠标悬停到XS时看到XSmall，S中的Small等等：

编辑：许多人要求提供编码方面的信息，这里是一个实时编码示例：

那么，如何解决呢

以下是

ProductSizeGroup

组件代码，显示

ProductSize

项目和悬停触发的大小

const ProductSizeGroup: React.FC<IProductSizeGroupProps> = (props) => {
  const { ProductSizes } = props;

  const [inHover, setHover] = useState(false);

  return (
    <Box style={{ width: "100%" }}>
      <Typography>
        {" "}
        Size:
        {ProductSizes.map((products: any) =>
          inHover ? products.name : undefined
        )}
      </Typography>
      <Box display="flex" justifyContent="flex-start" p={1} m={1}>
        {ProductSizes.map((products: any) => (
          <Box
            onMouseEnter={() => setHover(true)}
            onMouseLeave={() => setHover(false)}
          >
            <ProductSize
              inStock={products.inStock}
              sizeText={products.sizeText}
              name={products.name}
            />
          </Box>
        ))}
      </Box>
    </Box>
  );
};

const ProductSizeGroup:React.FC=（道具）=>{
const{ProductSizes}=props；
const[inover，setHover]=使用状态（false）；
返回(
{" "}
尺寸：
{ProductSizes.map（（产品：任意）=>
InOver？产品。名称：未定义
)}
{ProductSizes.map（（产品：任意）=>(
setHover（真）}
onMouseLeave={（）=>setHover（false）}
>
))}
);
};

为了处理状态，可以使用react上下文提供程序：或react redux

根据你有多少州以及你想用它们做什么，你可以从两个州中选择一个。React redux只加载您需要的状态，速度更快，但它有一个您需要遵循的特定结构。刚开始时比较复杂，但可以更轻松地处理多个状态

---

上下文提供程序已随react一起安装，设置起来更容易，但速度较慢，因为它会在每次加载页面时加载所有状态。

问题在于您通过以下方式显示大小：

Size:
{ProductSizes.map((products: any) =>
  inHover ? products.name : undefined
)}

其中，上方的

只是一个布尔值。因此，它要么显示所有
name
值，要么什么也不显示

我认为更好的方法是如下所示，将
hovered
状态设置为所需的值，然后简单地显示它

const [hovered, setHovered] = useState<string | undefined>();

return (
  <!-- snip -->

  <Typography>Size: {hovered}</Typography>

  <!-- snip -->
  {ProductSizes.map(product => (
    <Box
      onMouseEnter={() => setHovered(product.name)}
      onMouseLeave={() => setHovered(undefined)}
    >
      <!-- etc -->
    </Box>
  ))}
)

const[hovered，setHovered]=useState（）；
返回(
大小：{悬停}
{ProductSizes.map（产品=>(
sethover（product.name）}
onMouseLeave={（）=>setHovered（未定义）}
>
))}
)


请注意，我还删除了沙箱中的一些
打字。
这个问题似乎很简单，如果您只需将
ProductSizeGroup
中的代码包含在问题中，则可以更快地解决此问题。该工作要求您不要将相关信息发布到StackOverflow？这是一个非常奇怪的要求，你可能会发现阅读这个网站对你有帮助。为了获得您问题的最佳答案，我们希望看到您尝试先使用..解决问题。您所需要的只是显示尺寸的代码和在上方设置的代码。全部完成，大约8-10行代码。你现在有一个问题作为你问题的一部分。嗨，非常感谢你的详细回答。但是，项目不允许我使用Redux:/Try then和上下文提供程序。它已经包含在React中，您只需将其添加到App.tsx中并添加状态。非常感谢你，菲尔。我非常感谢你的解决方案，而且效果非常好。我肯定会从您的编码中学习：）