使分离的组件随用户消失而消失

Question

我目前正在学习React Hooks功能，因此我创建了一个小实验，如果单击按钮，将出现一个隐形（未填充）框；如果盒子可见，并且您单击页面上的任何地方，则框将消失。我正在努力使盒子消失，但我不知道是什么原因导致了错误。

初始状态和还原器：

const initialState = { visible: false };
const reducer = (state, action) => {
    switch (action.type) {
        case 'show':
            return { visible: true };
        case 'hide':
            return { visible: false };
        default:
            return state;
    }
};

框组件：

function Box() {
    const [state, dispatch] = useReducer(reducer, initialState);
    const boxElement = useRef(null);
    const boxStyle = {
        width: '200px',
        height: '200px',
        background: 'blue'
    };
    function hideBox(e) {
        if(!boxElement.current.contains(e.target)) {
            dispatch({ type: 'hide' });
        }
    }
    useEffect(() => {
        window.addEventListener('click', hideBox);
        return () => {
            window.removeEventListener('click', hideBox);
        }
    });
    return <div style={boxStyle} ref={boxElement} />
}

主：

function App() {
    const [state, dispatch] = useReducer(reducer, initialState);
    function showBox() {
        dispatch({ type: 'show' });
    }
    return (
        <section>
            { state.visible && <Box /> }
            <button onClick={showBox}>Show box</button>
        </section>
    )
}

Answer 1

您使用的是两个用户ducer的实例，而您只需要在 App component级别上具有一个实例并通过dispatch as a prop to Box，否则您只需要更新用户defucer在框中使用的状态，而不是在框中使用的状态应用程序组件中的状态

function App() {
    const [state, dispatch] = useReducer(reducer, initialState);
    function showBox() {
        dispatch({ type: 'show' });
    }
    return (
        <section>
            { state.visible && <Box dispatch={dispatch}/> }
            <button onClick={showBox}>Show box</button>
        </section>
    )
}

box.js

function Box({dispatch}) {
    const boxElement = useRef(null);
    const boxStyle = {
        width: '200px',
        height: '200px',
        background: 'blue'
    };
    function hideBox(e) {
        if(!boxElement.current.contains(e.target)) {
            dispatch({ type: 'hide' });
        }
    }
    useEffect(() => {
        window.addEventListener('click', hideBox);
        return () => {
            window.removeEventListener('click', hideBox);
        }
    });
    return <div style={boxStyle} ref={boxElement} />
}

工作演示