Reactjs React中从子级传递/调用函数到父级

我正在慢慢地学习反应，遇到了一个小问题。我已经创建了自己的组件（功能方法），它由网格表示

网格组件中有创建新空行的函数。应该触发添加操作的按钮，我必须拉得更高，到父级

我已经读了一点，希望跳过使用refs来触发子对象相对于单击父对象的操作

我写了这段代码，它可以按照我的要求工作，但我想请您检查并告诉我这种方法是否正确，或者我是否应该以不同的方式来做。 下面我将介绍组件的一个重要片段

const View = () => {
    const [add, setAdd] = useState(() => { });
        
    const callbackOnAdd = (handle) => {             
        setAdd({ onAdd: handle });
    }

    const handleButtonClick = useCallback(() => {
        add.onAdd();        
    });

    return (
        <Grid callbackOnAdd={callbackOnAdd} />
        <Button onClick={handleButtonClick} />
        
    );
}

---

我自己不是专家，但我想说你的方法很好。我总是努力使与状态相关的逻辑位于状态所在的相同组件中。一、 我也不想太多地使用refs，因为我的经验只是组件模块化方面的一系列问题。一张便条；在网格组件中有一个useEffect，其中包含一个空的依赖项数组。这将导致组件只更新一次。通常你想在你的dependecy数组中有一些东西。我自己不是专家，但我想说你的方法很好。我总是努力使与状态相关的逻辑位于状态所在的相同组件中。一、 我也不想太多地使用refs，因为我的经验只是组件模块化方面的一系列问题。一张便条；在网格组件中有一个useEffect，其中包含一个空的依赖项数组。这将导致组件只更新一次。通常，您希望在dependecy数组中包含一些内容。

const Grid = ({ callbackOnAdd }) => {

    ...

    useEffect(() => {
        callbackOnAdd(() => {
            addNewRow();
        });
    }, []);
    
    ...
};