状态都移到父组件即A上就可以了吧 // A.js import React from 'react'; import B from './B.js'; function A() { const [isMenuOpen, setMenuOpen] = React.useState(false); const toggleMenu = () => { console.log('toggle', isMenuOpen); setMenuOpen(!isMenuOpen); }; const closeMenu = (event) => { if (event.target.closest('.menubar')) return; console.log('closeMenu'); if (isMenuOpen) setMenuOpen(false); }; return ( ); } export default A; // B.js import React from 'react'; const B = ({ toggleMenu, isMenuOpen }) => { return ( Open{' '} {isMenuOpen && 这里是菜单的内容} ); }; export default B; [stackblitz](https://link.segmentfault.com/?enc=NId%2F5SbZpYCXlKNrfLe46Q%3D%3D.B2VDPqqVbsgfjunItbqhMMaVNkgNxbZN7MsBBePBdYdayvZnEY5ReDxDv6WeIOzaddt6wJgxQWZn9dfzLObpFF5RK9nUavJMp1HQTNrPWYE%3D) 报warning应该是因为这段代码`Cannot update a component (A) while rendering a different component (B).` * `setLocalMenuOpen`的`callback`参数将会在`rendering`的时候执行。 * `isMenuOpenCallback(newLocalMenuOpen);`会触发A组件的更新。 setLocalMenuOpen(prevState => { const newLocalMenuOpen = !prevState; isMenuOpenCallback(newLocalMenuOpen); return newLocalMenuOpen; });