ReactJS 在不使用道具的情况下从孙子调用父函数

Question

你好，我现在有一个程序，我的曾孙调用由 props 传递的父函数。我不喜欢将函数传递到组件树中太深的想法。有其他方法吗？

我研究了静态函数，但我不确定如何使用函数组件来完成它。

我的组件树是这样的：

App
- resetDisplay() //pass this down
- NavBar
  - ButtonGroup
    - ResetButton 
      - onClick = props.resetDisplay

Answer 1

您可以像放入值一样将函数放入上下文中。

这是一个例子：

import React, {useContext} from 'react';

const NavbarContext = React.createContext({resetDisplay: () => {}});

function Navbar() {
    function resetDisplay() {
        // do stuff in here
    }

    return (
        <NavbarContext.Provider value={{resetDisplay}}>
            <ButtonGroup />
        </NavbarContext.Provider>
    );
}


function ButtonGroup() {
    return (
        <div>
            <ResetButton />
        </div>
    );
}

function ResetButton() {
    const {resetDisplay} = useContext(NavbarContext);

    return <Button onClick={() => resetDisplay()} >Reset</Button>;
}

ReactJS 在不使用道具的情况下从孙子调用父函数

ReactJS call parent function from grandchild without using props

javascript

parent-child

reactjs

react-props

react-functional-component