Question

我正在尝试创建一个自定义挂钩，以便能够使用样式display: none和display:block使用条件渲染来打开和关闭弹出菜单。我想我知道如何在组件之间共享状态（我可以控制台记录该状态并使其正常工作），但是我不知道如何使用该钩子来更新该状态。

我敢肯定，我在这里有一些基本的误解，但是如果有人能澄清一下我想达到的目标，那将是太棒了！我必须去的地方。

这是弹出菜单的标题，目前仅包含一个关闭按钮

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faWindowClose } from '@fortawesome/free-solid-svg-icons'
import useOpenCloseElementMenu from '../Hooks/openCloseElementMenu'

function ElementMenuHeader() {
const { elementMenuOpenClose, setElementMenuOpenClose } = useOpenCloseElementMenu();
return (
    <div id="App-Close-Element-Menu-Container">
    <button id="App-Close-Element-Menu"
        onClick={() => setElementMenuOpenClose(false) }
    >
        <FontAwesomeIcon icon={faWindowClose} />
    </button>
    </div>
);
}

export default ElementMenuHeader

这是弹出菜单

import React from 'react';
import SizerGroup from '../Sizer/sizerGroup';
import './element-menu.css';
import ElementMenuHeader from './element-menu-header';
import TitleWithLine from './title-with-line';
import TypeSelector from './type-selector';
import TemplateSelector from './template-selector';
import useOpenCloseElementMenu from '../Hooks/openCloseElementMenu'

function Editor(props) {
const { elementMenuOpenClose, setElementMenuOpenClose } = useOpenCloseElementMenu();
console.log(elementMenuOpenClose);
return (
    <div className="App-Element-Menu"  
    style={{display: elementMenuOpenClose ? 'block' : 'none' }}
    >
    <ElementMenuHeader />
    <TitleWithLine title="Element size" />
    <SizerGroup />
    <TitleWithLine title="Elements" />
    <TypeSelector />
    <TitleWithLine title="Templates" />
    <TemplateSelector />
    </div>
);
}

export default Editor

这是具有打开菜单按钮的工具栏

import React from 'react'
import Button from '../Button/button'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBoxes } from '@fortawesome/free-solid-svg-icons'
import './toolbar.css'
import useOpenCloseElementMenu from '../Hooks/openCloseElementMenu'


function Toolbar(props) {
const { toolbar_show_or_hide } = props
const elementMenuIcon = <FontAwesomeIcon icon={ faBoxes } />
const { elementMenuOpenClose, setElementMenuOpenClose } = useOpenCloseElementMenu();
const openEditor = setElementMenuOpenClose[true]

return (
<div className="App-Toolbar" style={{ display: toolbar_show_or_hide  ? "flex" : "none" }} >
    <Button
    id="App-Open-Element-Menu-Button"
    icon={ elementMenuIcon }
    useToolTip={ true }
    toolTipText="Elements menu. Select elements to populate the theme."
    buttonFunction={ openEditor }
    />
    </div>
)
}

export default Toolbar

这是钩子

import React, { useState } from 'react';

const useOpenCloseElementMenu = () => {
const [elementMenuOpenClose, setElementMenuOpenClose] = useState(false);
return { elementMenuOpenClose, setElementMenuOpenClose };
};

export default useOpenCloseElementMenu;

Answer 1

我觉得您不必像以前一样在单独的函数useOpenCloseElementMenu中传递该钩子。

代替导入../Hooks/openCloseElementMenu函数的东西，

我宁愿直接将钩子称为

const [elementMenuOpenClose, setElementMenuOpenClose] = useState(false);

在编辑器和工具栏组件中，代替const { elementMenuOpenClose, setElementMenuOpenClose } = useOpenCloseElementMenu();。

如果我要问的话，您还使用了工具栏组件中的哪个组件？因为我似乎在这里看不到任何东西……这使它从何处获得了toolbar_show...道具感到困惑。

{我希望这有助于导致似乎最明显的原因}

如何使用自定义钩子在两个单独的组件中更新状态？

1 个答案: