Independent Development
So many problems encountered while developing a simple website…
I shouldn’t say fixing them were time wasting. I did learn a lot.
But it was kind of boring too.😡
React
{} and ()
Error
I used a boolean variable to control if a component should be shown, but didn’t work.
Solution
Well, it was a simple mistake.
(booleanVariable && <MyComponent />) // Wrong, but no error reported. Something strange would be shown on the page.
{booleanVariable && <MyComponent />} // This is right. Use {}.Building navigation bar but not shown correctly
Error
I use button to build the navigation bar, but they looked odd. They may have some rects around it.
Solution
Use border-none to remove the border.
Use focus:outline-none to remove the border while being clicked.
How to build a framework with fixed top
Error
If the page extended, the top part would be hard to be shown.
Solution
Build a flex framework out of the components was a good choice. flex flex-col: outer div; shrink-0 the fixed part will not be compressed; flex-1 overflow-y-auto this the scrollable part.
But it didn’t work very well for me.
Instead, I used another solution: sticky top-0. This will make the component sticky to the top. Add z-10 to avoid being covered.
Related Platforms
(Github Issues) / (Notion) / (Blog)
Advertisement
(A website to optimize your resume and to boost your career: Nonpareil.me)
独立开发
仅仅开发一个简单的网站，就遇到了非常多的问题。
也不能说是浪费时间，我确实学习了很多内容。
不过还是很烦。😡
React
{}和()
问题
我用一个boolean变量来控制一个组件是否显示，结果不成功。
解决方案
结果是个低级的笔误：
(booleanVariable && <MyComponent />) // 错误。虽然不会报错，但是不会按照预想的显示。反而会显示一些奇怪的内容，比如变量名。
{booleanVariable && <MyComponent />} // 用{}才是正解。创建导航条但是显示不正常
问题
我用React的button来构建一个导航菜单栏，但是看起来很奇怪，总是有边框存在。
解决方案
border-none移除常规情况下的边框。
focus:outline-none移除点击情况下的边框。
如何创建一个顶部不随页面滚动的框架
问题
随着页面变长，想看顶部的一些组件很不方便。
解决方案
一种方案是在外部直接建立一个容器框架。flex flex-col：外部容器。 shrink-0保证固定部分不被压缩。flex-1 overflow-y-auto这个部分可以滚动。
不过实际在用的时候，效果不是让我很满意，应该也是我没调整好。
我用了另外一种方法：sticky top-0。这会让组件依附在页面顶端，不会继续随着页面滚动。可以再添加z-10来避免被遮挡。
相关平台
(Github Issues) / (Notion) / (Blog)