React：將狀態傳遞給子組件

我正在處理 Frontend Mentor 專案，并且正在嘗試將懸停狀態從父組件 (App) 傳遞到子組件 (Listing)。

您可以看到我在 App 組件中創建了一個名為 hover 的狀態物件并將其傳遞給 Listing 組件，但是當懸停物件更新時，css 樣式沒有應用，因為它應該在 Listing 組件內的 Typography 元素上。或者至少沒有重新渲染，如果有的話。

應用程式.js

  let [hover, updateHover] = useState(false);

  updateHover = () => {
    if(hover === false){hover = true; console.log(hover); return(0);}
      else{hover = false; console.log(hover); return;}
  }

  return (
    <ThemeProvider theme={ theme }>
      <div style={{backgroundColor:'hsl(180, 52%, 96%)',}}>
        <div style={{backgroundImage:`url(${headerImage})`, backgroundSize:'cover', height:'10rem'}}></div>
        <Box display="flex" justifyContent="center" alignItems="center">
          <Box style={{width:'70%', marginTop:'5rem'}}>
            <Card style={styles.listing} onMouseEnter={updateHover} onMouseLeave={updateHover}>
              <CardActionArea href="#" className="listingHover">
                <Listing id="one" hover={hover} />
              </CardActionArea>
            </Card>
          </Box>
        </Box>
      </div>
    </ThemeProvider>
  );
}

export default App;

清單.js

function Listing(props) {
    let id = props.id
    let hover = props.hover

    return (
        <React.Fragment>
            <Box className="listing" display="flex" sx={{backgroundColor:'#fff', width:'100%', height:'7.3rem'}}>
                    <Box>
                        <Typography variant="h4"><Link className={hover ? 'jobTitle': null} href="#" color="secondary" underline="none">{jobs[id].name}</Link></Typography>
                    </Box>
                </Box>
            </Box>
        </React.Fragment>
    )
}

export default Listing

uj5u.com熱心網友回復：

您在React 中更改狀態是錯誤的。像這樣嘗試。

const [hover, setHover] = useState(false);
  updateHover = () => {
    setHover(!hover)
  }

或者

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

return (
    <ThemeProvider theme={ theme }>
      <div style={{backgroundColor:'hsl(180, 52%, 96%)',}}>
        <div style={{backgroundImage:`url(${headerImage})`, backgroundSize:'cover', height:'10rem'}}></div>
        <Box display="flex" justifyContent="center" alignItems="center">
          <Box style={{width:'70%', marginTop:'5rem'}}>
            <Card style={styles.listing} onMouseEnter={() => setHover(true)} onm ouseLeave={() => setHover(false)}>
              <CardActionArea href="#" className="listingHover">
                <Listing id="one" hover={hover} />
              </CardActionArea>
            </Card>
          </Box>
        </Box>
      </div>
    </ThemeProvider>
  );

uj5u.com熱心網友回復：

我認為您的問題是您重新宣告了 updateHover。

您應該更改名稱并具有類似的內容

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

const updateHover = () => {
   if (!hover) {
      console.log(hover);
      setHover(true);
      return(0)
   } else {
     setHover(false)
     return;
   }
}

順便說一句，你為什么從函式中回傳？你需要console.log嗎？一個更清潔的選擇是

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

  const updateHover = () => setHover(!hover) // flips the current value i.e  same as if (hover === true) setHover(false) else setHover(true);

  return (
    <ThemeProvider theme={ theme }>
      <div style={{backgroundColor:'hsl(180, 52%, 96%)',}}>
        <div style={{backgroundImage:`url(${headerImage})`, backgroundSize:'cover', height:'10rem'}}></div>
        <Box display="flex" justifyContent="center" alignItems="center">
          <Box style={{width:'70%', marginTop:'5rem'}}>
            <Card style={styles.listing} onMouseEnter={updateHover} onMouseLeave={updateHover}>
              <CardActionArea href="#" className="listingHover">
                <Listing id="one" hover={hover} />
              </CardActionArea>
            </Card>
          </Box>
        </Box>
      </div>
    </ThemeProvider>
  );
}

標籤：javascript 反应 状态

上一篇：FoliumMap洗掉檔案中的所有JavaScript

下一篇：用JavaScript交換一個類的所有元素的標簽