使用 React Hooks，我如何制作一个可重用的组件和父组件相互利用？

Posted 2023-02-23

【中文标题】使用 React Hooks，我如何制作一个可重用的组件和父组件相互利用？

【英文标题】：Using React Hooks, how do I make a reusable component and parent component that utilize each other?

【发布时间】：2021-03-25 15:39:18

【问题描述】：

我想做什么？

制作一个可以与父组件一起使用的可重用 React 组件，具体取决于父组件的需求。

目前尝试这样做的代码是什么？

ReusableComponent.js

import * from "react";

import MenuItem from "@material-ui/core/MenuItem";
import TextField from "@material-ui/core/TextField";

export default function ReusableComponent() 
    const [championClass, setChampionClass] = useState("");
        
    const handleChange = (e) => 
        setChampionClass(e.target.value);
    ;

    return (
        <TextField
            onChange=handleChange
            select
            value=championClass
        >
            <MenuItem value="Fighter">Fighter</MenuItem>
            <MenuItem value="Mage">Mage</MenuItem>
            <MenuItem value="Marksman">Marksman</MenuItem>
        </Textfield>
    );

父组件.js

import * from "react";

import ReusableComponent from "../ReusableComponent";

export default function ParentComponent() 
    // There's gonna be other parents such as forest, mountain, etc.)
    const [underwaterChampionClass, setUnderwaterChampionClass] 
        = useState("");

    const handleUnderwaterChampionClass = (e) => 
        setUnderwaterChampionClass(e.target.value)
        console.log(underwaterChampionClass);
    

    return (
        <ReusableComponent 
            championClass=underwaterChampionClass 
            setChampionClass=handleUnderwaterChampionClass
        />
    )

我期望结果是什么？

当我从父级下拉列表中选择一个值时，它会通过“console.log”反映到父组件。

实际结果如何？

控制台中没有填充任何内容。

我认为问题可能是什么？

我觉得我没有正确连接组件，我不确定如何使用 React Hooks 解决这个问题，因为多个父组件将使用这个可重用的下拉组件。

【参考方案1】：

您实际上并没有使用从ParentComponent 传递到ReusableComponent 的道具，而是创建了两个独立的状态。您应该将ReusableComponent 更改为：

import * from "react";

import MenuItem from "@material-ui/core/MenuItem";
import TextField from "@material-ui/core/TextField";

export default function ReusableComponent(
  value,
  handleChange
) 
    return (
        <TextField
            onChange=e => handleChange(e.target.value)
            select
            value=value
        >
            <MenuItem value="Fighter">Fighter</MenuItem>
            <MenuItem value="Mage">Mage</MenuItem>
            <MenuItem value="Marksman">Marksman</MenuItem>
        </Textfield>
    );

和ParentComponent 到：

import * from "react";

import ReusableComponent from "../ReusableComponent";

export default function ParentComponent() 
    // There's gonna be other parents such as forest, mountain, etc.)
    const [underwaterChampionClass, setUnderwaterChampionClass] 
        = useState("");

    const handleUnderwaterChampionClass = (newChampionClass) => 
        setUnderwaterChampionClass(newChampionClass)
        console.log(underwaterChampionClass);
    

    return (
        <ReusableComponent 
            value=underwaterChampionClass 
            handleChange=handleUnderwaterChampionClass
        />
    )