javascript - 从 React 功能组件导出功能并在其他地方使用

Question

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

我试图创建单独的 function.js 文件，我想在其中放置我的一些函数，但是 useDispatch Hook 使它不可能，因为它会抛出很多错误尽一切努力使其发挥作用。 我正在寻找解决方案并尝试以不同的组合使用一些 export 语句。

我想做的是将我的 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

Answer 1

在另一个文件中定义函数。或者在该文件中定义它并导出它。然后你可以将它导入到其他文件中用于其他组件。