如何在包含渲染第一个组件的函数的组件之外渲染组件？

Question

情况有点复杂：

• 在名为“LeftSectionHeader”的组件中，我有一个 div，单击它时必须呈现一个组件；

• 要呈现的组件称为“ProfileMenu”，基本上是一个必须在“LeftSectionHeader”本身和另一个 div 之上呈现的 div；

• 所有这些组件都在另一个名为“Main”的组件中呈现。

问题是，如果我在“LeftSectionHeader”内部定义函数，“ProfileMenu”将在内部呈现，而我不仅需要它在外部呈现，甚至还需要覆盖它； 这就是为什么你会在“Main”中看到一些布尔变量，因为这是我渲染它的唯一方法，但它仍然没有覆盖其他 div。 我将在下面附上每个组件的代码以及最终结果的外观。

左部分标题：

 function LeftSectionHeader(){
  return(
    <div class="left-section-header">
        <div class="crop" ><img src="./images/profiles/anonimous.png" /></div>
    </div>
  );
}

属于“crop”类的 div 是必须单击以呈现“ProfileMenu”的那个

简介菜单：

   function ProfileMenu(){
  
  return(
    <div class="profile-side-menu">
       //A lot of boring stuff
    </div>
  );
}

有一些和这个组件相关的功能，但是它们并不重要，所以我没有放它们，忽略它

主要的：

var p=true;
var m=true;

    function Main(){
      return(
        <div class="main">
          <Header />
            <div class="left-section">
            {m ? <div><LeftSectionHeader /><LangMenu /></div>  : <ProfileMenu />}
            </div>
          {p ? <PostPage /> : <NoPostsMessage />} //Ignore this line
          </div>
      );
    }

在点击橙色 div 之前

点击后

Answer 1

这可能有助于指导，希望！

 function LeftSectionHeader({ onClick }){ return( <div class="left-section-header" onClick={onClick}> <div class="crop" ><img src="./images/profiles/anonimous.png" /></div> </div> ); } function Main(){ const [showProfile, setShowProfile] = useState(false); return( <div class="main"> <Header /> <div class="left-section"> {!showProfile ? ( <div> <LeftSectionHeader onClick={() => setShowProfile(true)} /> <LangMenu /> </div> ) : <ProfileMenu />} </div> {p ? <PostPage /> : <NoPostsMessage />} //Ignore this line </div> ); }

Answer 2

最简单的解决方案可能是将处理程序传递到标头组件以切换菜单：

function App () {
  const [showMenu, setShowMenu] = useState();
  return (
    <div>
      <Header onMenuToggle={() => setShowMenu(!showMenu)} />
      { showMenu && <Menu /> }
    </div>
  )
}

function Header ({ onMenuToggle }) {
    <div onClick={onMenuToggle}>...</div>
}

警告：这将导致整个 App 组件在菜单状态更改时重新渲染。 您可以通过以下任一方式缓解这种情况

• A) 将菜单状态放置在更接近实际需要的位置，例如在侧边栏组件中而不是在顶部，或
• B) 使用上下文或其他正交状态存储。

另一种方法是将状态处理留在 LeftSectionHeader 组件中，然后使用React 门户在 DOM 中的其他地方呈现菜单。