Question

我有一个名为MainMenu.js的组件，该组件具有一个名为getMenuData（）的函数，该函数用于通过其服务来更新MainMenu组件的值。

class MainMenu extends Component {

 getMenuData = (action) => {
...
 }
<ul className="treeview-menu">
              {item.categories.map(aItem => (
                <li
                  key={aItem.id}
                  className={` ${
                    searchParams.type === aItem.name ? "active" : ""
                  }`}
                >
              <Link
                 to={{
                      pathname: "/categories/" + item.id,
                      search: "?type=" + aItem.name,
                state: {
                   actionId: item.actionId,
                }
                }}>
           <i className="fa fa-circle-o" />
               {aItem.label}                        
               </Link>
              </li>
  ))}
  </ul>


export default MainMenu;

还有一个名为 Home.js 的组件，该组件需要访问 getMenu（）函数。 Home组件不是MainMenu的子组件。如何获得getMenuData到Home.js的引用？我可以通过道具访问它吗？

Answer 1

如果该函数不使用任何状态操作，则可以将其从组件中取出并导出

Answer 2

您需要做的称为Lift the State Up（但在您的情况下，不是状态，而是函数）

您可以做的是

function WrapperComponent(){
    const getMenuData = (action) => {...}

    return (
        <>
            <MainMenu getMenuData={getMenuData} />
            <Home getMenuData={getMenuData} />
        </>
    )    
}

OR

如果getMenuData是仅依赖于其参数的函数，则可以将其放在另一个文件中并将其导入两个组件中。

如何将功能传递给不相关的组件

2 个答案: