React：将状态传递给子组件

Posted 2023-02-19

【中文标题】React：将状态传递给子组件

【英文标题】：React: Passing state to child component

【发布时间】：2022-01-18 04:00:37

【问题描述】：

我正在处理一个前端导师项目，我正在尝试将悬停状态从父组件 (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);
      elsehover = 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

【问题讨论】：

为什么不直接使用css的:hover呢？

【参考方案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>
  );

【参考方案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>
  );

【讨论】：

哦，是的，返回和控制台日志是我调试过程的一部分。当我发布问题时忘记删除它们。