[英]How to render a component outside the component that contains the function that renders the first component?
The situation is a bit complicated:情况有点复杂:
inside a component called "LeftSectionHeader" I have a div, which when clicked must render a component;在名为“LeftSectionHeader”的组件中,我有一个 div,单击它时必须呈现一个组件;
the component to be rendered is called "ProfileMenu", and is basically a div that must be rendered on top of "LeftSectionHeader" itself and another div;要呈现的组件称为“ProfileMenu”,基本上是一个必须在“LeftSectionHeader”本身和另一个 div 之上呈现的 div;
All these components are rendered inside another component called "Main".所有这些组件都在另一个名为“Main”的组件中呈现。
The problem is that if I define the function inside "LeftSectionHeader", "ProfileMenu" will be rendered inside, while I need it to not only be rendered outside, but even cover it;问题是,如果我在“LeftSectionHeader”内部定义函数,“ProfileMenu”将在内部呈现,而我不仅需要它在外部呈现,甚至还需要覆盖它; that's why you'll see some boolean vars inside "Main", because that is the only way i could render it, but it still doesn't cover the other divs.这就是为什么你会在“Main”中看到一些布尔变量,因为这是我渲染它的唯一方法,但它仍然没有覆盖其他 div。 I'll attach the code of each component and how the final result should look below.我将在下面附上每个组件的代码以及最终结果的外观。
LeftSctionHeader:左部分标题:
function LeftSectionHeader(){
return(
<div class="left-section-header">
<div class="crop" ><img src="./images/profiles/anonimous.png" /></div>
</div>
);
}
The div belonging to the "crop" class is the one that must be clicked to render "ProfileMenu"属于“crop”类的 div 是必须单击以呈现“ProfileMenu”的那个
ProfileMenu:简介菜单:
function ProfileMenu(){
return(
<div class="profile-side-menu">
//A lot of boring stuff
</div>
);
}
There are some functions related to this component, but they are not important, so I didn't put them, just ignore it有一些和这个组件相关的功能,但是它们并不重要,所以我没有放它们,忽略它
Main:主要的:
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>
);
}
This might help as guidline, hopefully!这可能有助于指导,希望!
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> ); }
The simplest solution might be to pass a handler into the header component to toggle the menu:最简单的解决方案可能是将处理程序传递到标头组件以切换菜单:
function App () {
const [showMenu, setShowMenu] = useState();
return (
<div>
<Header onMenuToggle={() => setShowMenu(!showMenu)} />
{ showMenu && <Menu /> }
</div>
)
}
function Header ({ onMenuToggle }) {
<div onClick={onMenuToggle}>...</div>
}
Caveat: This will cause the entire App component to re-render when the menu state changes.警告:这将导致整个 App 组件在菜单状态更改时重新渲染。 You can mitigate this by either您可以通过以下任一方式缓解这种情况
Another approach would be to leave the state handling in the LeftSectionHeader component and then use a React portal to render the menu elsewhere in the DOM.另一种方法是将状态处理留在 LeftSectionHeader 组件中,然后使用React 门户在 DOM 中的其他地方呈现菜单。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.