React：将状态传递给子组件

Question

我正在处理一个前端导师项目，我正在尝试将悬停状态从父组件 (App) 传递到子组件 (Listing)。

您可以看到我在 App 组件中创建了一个名为 hover 的状态对象并将其传递给 Listing 组件，但是当悬停对象更新时，css 样式不会应用，因为它应该在 Listing 组件内的 Typography 元素上.或者至少不会重新渲染。

App.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;

Listing.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

Answer 1

你错了 更改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)} onMouseLeave={() => setHover(false)}>
              <CardActionArea href="#" className="listingHover">
                <Listing id="one" hover={hover} />
              </CardActionArea>
            </Card>
          </Box>
        </Box>
      </div>
    </ThemeProvider>
  );

Answer 2

我认为你的问题是你被声明为 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>
  );
}