[英]How to use a state from another file in react
I have a storybook project and created a new custom component.我有一个故事书项目并创建了一个新的自定义组件。 I used a hover state and when I hover the component, it updates its className and it just works fine.
我使用了 hover state ,当我使用 hover 组件时,它会更新其类名,并且工作正常。 Named: ProductSize
名称:ProductSize
And then, I created a new component to group the ProductSize component and named it as ProductSizeGroup and grouped them by the Json inside the ProductSizeGroup stories.然后,我创建了一个新组件来对 ProductSize 组件进行分组,并将其命名为 ProductSizeGroup,并通过 ProductSizeGroup 故事中的 Json 对它们进行分组。
And here is the final product screen:这是最终的产品屏幕:
Here, I want to see the sizes when I hover the boxes.在这里,我想看看我 hover 时的尺寸。 But, it shows me all the sizes all alone like this.
但是,它像这样向我展示了所有的尺寸。 Apparently, I only want to see XSmall when I hover to XS, Small in S etc..:
显然,我只想在 hover 到 XS、S 中的小等时看到 XSmall:
Edit: Many people asked for the coding side and that is here - a live coding example:编辑:许多人要求编码方面,那就是这里 - 一个实时编码示例:
https://codesandbox.io/s/usestateissue-10l4l https://codesandbox.io/s/usestateissue-10l4l
So, how to solve it?那么,如何解决呢?
Here is the ProductSizeGroup
component code displaying the ProductSize
items and hover-triggered sizes这是显示
ProductSize
项目和悬停触发大小的ProductSizeGroup
组件代码
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>
);
};
The issue is that you're displaying the size via the following问题是您通过以下方式显示大小
Size:
{ProductSizes.map((products: any) =>
inHover ? products.name : undefined
)}
where inHover
is simply a Boolean value.其中
inHover
只是一个 Boolean 值。 So this will either show all name
values or nothing.因此,这将显示所有
name
值或不显示任何内容。
I think what would work better is something like the following where you set the hovered
state to the value you want and simply display it我认为更好的方法是如下所示,您将
hovered
的 state 设置为您想要的值并简单地显示它
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>
))}
)
Take note that I've also removed some of your any
typings in the sandbox.请注意,我还删除
any
您在沙盒中输入的一些内容。
In order to handle states, you can use the react context provider: https://reactjs.org/docs/context.html or react redux https://react-redux.js.org/ . In order to handle states, you can use the react context provider: https://reactjs.org/docs/context.html or react redux https://react-redux.js.org/ .
Depending on how many states you have and what you want to do with them you can choose one of the two.根据您有多少个州以及您想对它们做什么,您可以选择两者之一。 React-redux loads only the states you need, it is faster, but it has a specific structure that you need to follow.
React-redux 仅加载您需要的状态,它更快,但它具有您需要遵循的特定结构。 It is more complex at the beginning, but you can easier handle multiple states.
一开始它更复杂,但您可以更轻松地处理多个状态。
Context provider is already installed with react, it is easier to set up, but it is slower since it loads all states on each page load.上下文提供程序已经与 react 一起安装,它更容易设置,但速度较慢,因为它会在每次页面加载时加载所有状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.