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

在另一个文件中定义功能。或在该文件中定义并导出。然后，您可以将其导入其他组件的其他文件中。

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

1 个答案: