React：将状态传递给子组件

Question

我正在做一个 Frontend Mentor 项目，我正在尝试将悬停状态从父组件 (App) 传递到子组件 (Listing)。

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

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

React：将状态传递给子组件

React: Passing state to child component

javascript

state

reactjs