反应：将 state 传递给子组件

Question

我正在开发一个前端导师项目，我正在尝试将 hover 状态从父组件（App）传递给子组件（Listing）。

You can see that I have created a state object called hover inside the App component and passed it to the Listing component but when the hover object updates the css style is not applied as it should be on the Typography element inside the Listing component. 或者至少没有重新渲染，如果有的话。

应用程序.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

Answer 1

您在React中更改 state 是错误的。 像这样试试。

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

顺便说一句，你为什么要从 function 回来？ 你需要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>
  );
}