Javascript 从React功能组件导出函数并在其他地方使用

我想将函数从使用钩子的一个功能组件导出到另一个功能组件。我想防止冗余代码出现在我的组件中

我曾尝试创建单独的

function.js

文件，我想在其中放置一些函数，但

useDispatch

hook使其不可能实现，因为每次尝试都会抛出大量错误。 我正在寻找解决方案，并尝试以不同的组合导出一些

语句

我想做的是将我的
toggleDrawer
功能从
Layout
组件导出到其他组件，下面是我的代码。我相信这很容易，我错过了一些东西

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import Header from '../Header/header'
import DrawerItems from '../DrawerItems/drawerItems'
import { REDUCERS } from '../../Config/config'

import Container from '@material-ui/core/Container'
import Drawer from '@material-ui/core/Drawer'
import { makeStyles } from '@material-ui/core/styles'

const useDrawerStyles = makeStyles({
    paper: {
        width: '175px',
        padding: '10px'
    }
})

const Layout = props => {
    const { isDrawerOpened } = useSelector(state => {
        return {
            ...state.interface_reducer
        }
    })
    const dispatch = useDispatch()
    const drawerClasses = useDrawerStyles()

    const toggleDrawer = (side, open) => event => {
        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
            return null
        }

        dispatch({
            type: REDUCERS.TOGGLE_DRAWER,
            payload: open
        })
    }

    return (
        <Container>
            <React.Fragment>
                <Header/>
                <Drawer classes={{paper: drawerClasses.paper}} open={isDrawerOpened} onClose={toggleDrawer('left', false)} >
                    <DrawerItems/>
                </Drawer>
                { props.children }
            </React.Fragment>
        </Container>
    )
}

export default Layout

从“React”导入React
从“react-redux”导入{useSelector，useDispatch}
从“../Header/Header”导入标题
从“../DroperItems/DroperItems”导入DroperItems
从“../../Config/Config”导入{REDUCERS}
从“@material ui/core/Container”导入容器
从“@material ui/core/Drawer”导入抽屉
从“@material ui/core/styles”导入{makeStyles}
const useDrawerStyles=makeStyles({
论文：{
宽度：'175px'，
填充：“10px”
}
})
常量布局=道具=>{
常量{isDrawerOpened}=useSelector（状态=>{
返回{
…state.interface\u减速机
}
})
const dispatch=usedpatch（）
const-drawercasses=useDrawerStyles（）
const-toggleDrawer=（侧边，打开）=>事件=>{
if（event.type=='keydown'&&（event.key=='Tab'| | event.key=='Shift'））{
返回空
}
派遣({
类型：异径管。开关式抽屉，
有效载荷：打开
})
}
返回(
{props.children}
)
}
导出默认布局
在另一个文件中定义函数。或者在该文件中定义并导出它。然后您可以将其导入其他组件的其他文件中。
我尝试过这个方法，但dispatch hook出现错误，说我违反了hooks规则，它只能在功能组件中使用。啊，好的，所以我有另一个问题：您希望从任何地方调用的这个函数影响这个组件的状态吗？或者要影响调用它的组件的状态？最简单的解决方案是，一旦在功能组件中定义了上述函数，就在
窗口
对象上定义一个全局函数<代码>窗口。_toggleDrawer_u=toggleDrawer窗口来自任何地方。是的，它应该会影响这个特定的
抽屉
组件。为了将问题可视化，它是SideNav菜单，我想从一些其他组件关闭它。我有解决我的具体问题的方法，因为应该关闭SideNav的元素是这个元素的子元素，我可以通过props将这个函数传递给
，就像这样。但是我想在组件之间共享函数，而不使用道具传递它们。考虑到您正在使用redux，解决方案当然不是使用任何东西都可以调用的全局函数，而是只使用redux操作，对吗？有几个选项：将
dispatcher
作为参数（并在lambda中绑定正确的参数，您已经在这样做了，这样就不会有任何伤害）。定义您的自定义钩子（我在这里不会这么做）。只需提取公共逻辑并共享它，事件处理程序很少共享，但它们的一些逻辑可能是。一般来说：不要过度考虑“无重复”准则，有时它只是没有意义。另外，我会检查
onClose
逻辑，它比它应该的更复杂…您正在调用一个函数来返回处理程序…它可能是处理程序的lambdaitself@AdrianoRepetti
onClose
是正确的，它不会在渲染时触发，我已经检查过了，它只是道具通行证d至
抽屉
部件。