英文:
In react, display a component on the right of sidebar after clicking button without changing layout
问题
我想要在点击“+”按钮后显示如图中所示的组件。这样的组件应该位于侧边栏的右侧，覆盖主要部分。
先前的布局是一个2列网格，不会改变，只是在其他组件上创建了一个新组件。
我困惑的是如何设置布局（例如，使用tailwind）以及放置新组件的正确方式（最好将其作为侧边栏的子组件，还是将侧边栏、主要部分和新组件置于同一级别？）
英文:
I would like to display such a component in the picture after clicking the "+" button. such a component should be at the right of the sidebar and over the main section.
The previous layout is a 2-col-grid and will not be changed, just a new component created over the others.
What I am confused is how to set the layout (e.g. using tailwind) and what is the proper way to place code of the new component (is it better to make it a child component of the sidebar, or make sidebar, main, and the new component the same level?)
答案1
得分: 1
关于要使用的方法，我通常选择在 className 内使用三元运算符，例如：
const [isClicked, setIsClicked] = useState(false)
<Sidebar>
<div className={`${isClicked ? 'opacity-1 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}></div>
</Sidebar>
如果需要的话，最终我可以使用 z-index。我像你建议的那样使用了Tailwind类，但你也可以添加一些自定义样式并用CSS进行样式设置。
英文:
Well, as far as I understand where you put it is up to you. Try to be as semantic as you can with your HTML.
About the method to use, I usually go for a ternary inside className, for example:
const [isClicked, setIsClicked] = useState(false)
<Sidebar>
<div className={`${isClicked ? 'opacity-1 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}></div>
</Sidebar>
Eventually I could make use of z-index if needed. I used tailwind classes as you suggest, but you can add some custom and style it with CSS.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论