TypeError：无法读取未定义的属性（读取“样式”）

Question

一直在调试这个问题。我试图让一组项目更改 onClick 但使用转换但“样式”未定义。我还包含了 Card 组件功能。非常感谢您的帮助

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>
    )
}

卡片组件

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>
  );
};

忽略： 一直在调试这个问题。我试图让一组项目更改 onClick 但使用转换但“样式”未定义。我还包含了 Card 组件功能。非常感谢您的帮助

Answer 1

像CardList 这样的函数组件没有 ref 属性，只有类组件或 DOM 元素有。

你还没有发布List 组件的实现，但我们假设它有一个<ul> 标签，这就是你最终需要操纵它的.style.transform

CardList >>> List >> ul（这是你需要传递ref的元素）

要将listRef 从CardList 一直传递到ul，您需要使用forwardRef 技术。

Card.List=React.forwardRef(function CardList (props,ref)
{
     const {children,...restProps} = props
     return <List{...restProps} ref={ref} >{children}</List>
})

List 组件本身：

const List = React.forwardRef(function (props,ref) {
           return <ul ref={ref}>
           ... the implementation of your List
             

现在你可以在这里传递listRef，它会沿着链条向下传递：

 <Card.List ref={listRef}> 

旁注：取自 Drew Reese 对此答案的评论，因为 CardList 只是将相同的道具从父组件转移到 List，您可以简单地将 List 分配给 @ 987654338@，那么只需要一步ref转发就够了：

Card.List = List // CardList component isn't used anymore.

Card.ListTitle 和 Card.Wrapper 也可以这样：

Card.ListTitle=ListTitle
Card.Wrapper=Wrapper

Answer 2

我也遇到了同样的问题，并试图让我的代码再次运行。检查给定代码和我的错误代码 sn-p 之间的相似性帮助我修复了错误。 奇怪的是，在我的元素（MUI<Snackbar> 元素，在我的例子中）之后，我遇到了 JSX 多行注释的错误。

错误：

我的代码 sn-p 看起来像：

      <Snackbar open={snackbarOpen} autoHideDuration={5000} onClose={()=>setSnackbar(false)} > {/* My Comment Here */}

            <>...</> 

      </Snackbar>

JSX 注释的位置与您的卡片组件非常相似

Card.ArrowSliderLeft = function 
    ...
    return <ArrowSliderLeft {...restProps }>
        {/*id allows me to style the icon directly */}
                <ArrowBackIosOutlined ... /> 
           </ArrowSliderLeft>

在开始标记之后立即删除评论部分{/* */} 对我有用。 因此，请尝试删除您的 JSX 评论或将其放在其他地方，看看是否有帮助。

在这里分享，仅供我和其他人将来参考。 :)