Экспортируйте функцию из функционального компонента React и используйте ее в другом месте.

Question

Я хочу экспортировать функцию из одного из моих функциональных компонентов, использующих хуки, в другой.Я хочу предотвратить появление избыточного кода в моих компонентах.

Я попытался создать отдельный файл function.js, в который я хотел бы поместить некоторые из своих функций, но хук useDispatch делает это невозможным, так как он чертовски многоошибок в каждой попытке заставить его работать.Я искал решение и пробовал некоторые операторы 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

Определить функцию в другом файле.Или определите его в этом файле и экспортируйте.Затем вы можете импортировать его в другие файлы для других компонентов.