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

【问题标题】：How to render a component outside the component that contains the function that renders the first component?如何在包含渲染第一个组件的函数的组件之外渲染一个组件？
【发布时间】：2021-10-29 21:56:20
【问题描述】：

情况有点复杂：

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

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

LeftSctionHeader：

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

属于“crop”类的div是必须点击才能呈现“ProfileMenu”的div

个人资料菜单：

   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

【问题讨论】：

使用useState钩子来存储点击的状态。在 div 点击时，只需将状态更改为 false。

标签： javascript reactjs render

【解决方案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>
  );
}

【讨论】：

非常感谢！你救了我。这几天我一直在寻找解决方案！

【解决方案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) 使用context 或其他正交状态存储。

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

【讨论】：