ReactJS 从孙子调用父 function 不使用道具

Question

你好，我现在有一个程序，我的曾孙调用父 function，它是由道具传递下来的。 我不喜欢将 function 传递到组件树太深的想法。 有没有另一种方法可以做到这一点？

我查看了 static 功能，但我不确定如何使用功能组件来做到这一点。

我的组件树如下所示：

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

Answer 1

您可以像输入值一样将 function 放入上下文中。

这是一个例子：

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