[英]TypeError: Cannot read properties of undefined (reading 'style')
Been stuck on debugging this for quite a while.一直在调试这个很长一段时间。 I'm trying to have a group of items change onClick but with the use of transform but 'style' is undefined.
我试图让一组项目更改 onClick 但使用转换但“样式”未定义。 I've also included the Card component functions.
我还包含了 Card 组件函数。 Help would be greatly appreciated
帮助将不胜感激
import React,{useRef} from 'react';
import { Card } from '../components';
import { CardItemContainer } from './card-item';
export function CardContainer()
{
const listRef=useRef()
const handleClick=(direction)=>
{
if(direction==="left")
{
listRef.current.style.transform=`translate(230)`
}
}
return(
<Card>
<Card.ListTitle> Continue to watch</Card.ListTitle>
<Card.Wrapper >
<Card.ArrowSliderLeft onClick={()=>handleClick('left')}/>
<Card.List ref={listRef}>
<CardItemContainer index={0}/>
<CardItemContainer index={1}/>
<CardItemContainer index={2}/>
<CardItemContainer index={3}/>
<CardItemContainer index={4}/>
<CardItemContainer index={5}/>
<CardItemContainer index={6}/>
</Card.List>
<Card.ArrowSliderRight onClick={() => handleClick("right")}/>
</Card.Wrapper>
</Card>
)
}
Card Components卡片组件
import {ArrowBackIosOutlined,ArrowForwardIosOutlined} from "@material-ui/icons";
import React, {} from 'react';
import {
Container,
List,
ListTitle,
Wrapper,
ArrowSliderLeft,
ArrowSliderRight
} from './styles/card';
export default function Card({ children, ...restProps }) {
return <Container {...restProps}>{children}</Container>
}
Card.ListTitle=function CardListTitle({children,...restProps})
{
return <ListTitle{...restProps}> {children} </ListTitle>
}
Card.Wrapper=function CardWrapper({children,...restProps})
{
return <Wrapper{...restProps} > {children} </Wrapper>
}
Card.List=function CardList({children,...restProps})
{
return <List{...restProps} >{children}</List>
}
Card.ArrowSliderLeft = function HeaderArrowBackIosOutlinedSymbol({...restProps })
{
return <ArrowSliderLeft {...restProps }>
{/*id allows me to style the icon directly */}
<ArrowBackIosOutlined id="sliderLeft"/>
</ArrowSliderLeft>
}
Card.ArrowSliderRight = function HeaderArrowForwardIosOutlinedSymbol({...restProps}) {
return (
<ArrowSliderRight {...restProps}>
<ArrowForwardIosOutlined id="sliderRight"/>
</ArrowSliderRight>
);
};
Ignore : Been stuck on debugging this for quite a while.忽略:在调试这个问题上卡了很长一段时间。 I'm trying to have a group of items change onClick but with the use of transform but 'style' is undefined.
我试图让一组项目更改 onClick 但使用转换但“样式”未定义。 I've also included the Card component functions.
我还包含了 Card 组件函数。 Help would be greatly appreciated
帮助将不胜感激
Function components like CardList
don't have a ref property, only class components or DOM elements do.像
CardList
这样的函数组件没有 ref 属性,只有类组件或 DOM 元素有。
You haven't posted List
component's implementation, but let's assume it has a <ul>
tag, and that is what you eventually need to manipulate its .style.transform
您还没有发布
List
组件的实现,但让我们假设它有一个<ul>
标签,这就是您最终需要操纵它的.style.transform
CardList
>>> List
>> ul (this is the element you need to pass the ref) CardList
>>> List
>> ul(这是你需要传递ref的元素)
To pass the listRef
all the way to ul
from CardList
you need to use the forwardRef technique.要将
listRef
从CardList
一直传递到ul
,您需要使用 forwardRef 技术。
Card.List=React.forwardRef(function CardList (props,ref)
{
const {children,...restProps} = props
return <List{...restProps} ref={ref} >{children}</List>
})
the List
component itself : List
组件本身:
const List = React.forwardRef(function (props,ref) {
return <ul ref={ref}>
... the implementation of your List
Now you can pass listRef
in here and it goes down the chain:现在你可以在这里传递
listRef
并且它会沿着链向下传递:
<Card.List ref={listRef}>
Side Note : taking from Drew Reese's comment on this answer, since CardList
is just transfering the same props from a parent component to List
, you can simply assign List
to Card.List
, then only one step of ref forwarding would be enough:边注:从德鲁里斯的评论接受这样的答案,因为
CardList
只是转化中的道具一样从父组件List
,你可以简单地分配List
来Card.List
,那么只有一个裁判转发的步骤是不够的:
Card.List = List // CardList component isn't used anymore.
The same thing could work for Card.ListTitle
and Card.Wrapper
:同样的事情也适用于
Card.ListTitle
和Card.Wrapper
:
Card.ListTitle=ListTitle
Card.Wrapper=Wrapper
I too have just faced this same issue, and have tried to get my code working again.我也刚刚面临同样的问题,并试图让我的代码再次工作。 Checking similarity between your given code and my erroneous code snippet helped me fix the error.
检查给定代码和我错误的代码片段之间的相似性帮助我修复了错误。 Strangely, I have faced this error with a JSX multi-line comment in place after my element ( MUI
<
Snackbar >
element, in my case).奇怪的是,我遇到了这个错误,在我的元素( MUI
<
Snackbar >
元素,在我的例子中)之后有一个 JSX 多行注释。
My code snippet looked something like:我的代码片段看起来像:
Card.ArrowSliderLeft = function
...
return <ArrowSliderLeft {...restProps }>
{/*id allows me to style the icon directly */}
<ArrowBackIosOutlined ... />
</ArrowSliderLeft>
Quite similar place of JSX comment as your Card Component JSX 注释的位置与您的卡片组件非常相似
Card.ArrowSliderLeft = function ... return <ArrowSliderLeft {...restProps }> {/*id allows me to style the icon directly */} <ArrowBackIosOutlined ... /> </ArrowSliderLeft>
Removing just the comment part {/* */}
immediately following an opening tag worked for me.在开始标记后立即删除评论部分
{/* */}
对我有用。 So, try removing your JSX comment or placing it elsewhere,and see if it helps.因此,尝试删除您的 JSX 注释或将其放在其他地方,看看是否有帮助。
Sharing it here just for my and others future reference.在这里分享只是为了我和其他人将来的参考。 :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.