類型錯誤：無法讀取未定義的屬性（讀取“樣式”）

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

邊注：從德魯里斯的評論接受這樣的答案，因為CardList只是轉化中的道具一樣從父組件List ，你可以簡單地分配List來Card.List ，那么只有一個裁判轉發的步驟是不夠的：

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

同樣的事情也適用於Card.ListTitle和Card.Wrapper ：

Card.ListTitle=ListTitle
Card.Wrapper=Wrapper

Answer 2

我也剛剛面臨同樣的問題，並試圖讓我的代碼再次工作。 檢查給定代碼和我錯誤的代碼片段之間的相似性幫助我修復了錯誤。 奇怪的是，我遇到了這個錯誤，在我的元素（ MUI < Snackbar >元素，在我的例子中）之后有一個 JSX 多行注釋。

錯誤：

我的代碼片段看起來像：

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

JSX 注釋的位置與您的卡片組件非常相似

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

在開始標記后立即刪除評論部分{/* */}對我有用。 因此，嘗試刪除您的 JSX 注釋或將其放在其他地方，看看是否有幫助。

在這里分享只是為了我和其他人將來的參考。 :)