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

Question

情况有点复杂：

在名为“LeftSectionHeader”的组件中我有一个 div，单击它时必须呈现一个组件；
要呈现的组件称为“ProfileMenu”，基本上是一个 div，必须在“LeftSectionHeader”本身和另一个 div 之上呈现；
所有这些组件都在另一个名为“Main”的组件中呈现。

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

LeftSctionHeader:

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

属于“crop”的divclass是必须点击渲染“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>
      );
    }

Before clicking on the orange div

After clicking

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

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

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

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

警告：当菜单状态改变时，这将导致整个 App 组件 re-render。您可以通过

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

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

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

How to render a component outside the component that contains the function that renders the first component?

javascript

render

reactjs