小编Nic*_* Vu的帖子

我正在尝试开始使用 React 上下文挂钩，但我似乎遇到了一个我不明白的问题。

我定义了一个用户上下文，它只是一个表示“hello user”的字符串，如下所示：

import { useContext, createContext } from "react"

export const UserContext = createContext<string | null>(null)

export interface IAuth {
  children: React.ReactNode;
}

const Auth: React.FC<IAuth> = (props) => {

  return(
    <UserContext.Provider value={"hello user"}>
      {props.children}
    </UserContext.Provider>
  )
}

export default Auth

然后我尝试访问是这样的：

const Dash: NextPage<dashPageProps> = (props) => {

  const contextMsg = useContext(UserContext)

  const submitForm = () => {
    console.log("logout")
  }

  return (
    <Auth>
    <div className="w-screen">
      <div className='text-xl'>
        Dashboard
      </div>
      <h1>{contextMsg}</h1>
      <button className='bg-gray-400 border-2 border-gray-600 w-fit mt-5' …

我想熟悉 NextJS，所以我正在构建一个简单的博客。数据通过 props 传递，并且可以在地图函数内部进行控制台记录，但由于某种原因不会在浏览器中显示任何 HTML。没有错误显示。VScode 中的 Prettier 也必须关闭，因为它添加了“;” 每次我都会保存这个地图功能

 <div>
        {post.map((post) => {
          {console.log(post.description + "here")}
          <h1>post</h1>
          
        })}
 </div>

控制台日志将显示在控制台中，但 h1 会渲染到屏幕上。

有人有什么建议吗？

我找不到问题出在哪里。关于隐藏点击任何菜单项有什么想法吗？

var button = document.getElementById("#1");
var menu = document.getElementById("#menu");
button.addEventListener('click', function(event) {
  if (menu.style.display == "block") {
    menu.style.display = "none";
  } else {
    menu.style.display == "block";
  }
});

<ul id="menu">
  <li><a href="#home" id="1" class="active">Home</a></li>
  <li><a href="#model-s" id="1" class="one">Model S</a></li>
  <li><a href="#model3" id="1">Model 3</a></li>
  <li><a href="#modelx" id="1">Model X</a></li>
  <li><a href="#modely" id="1">Model Y</a></li>
</ul>

我正在尝试完成 Odin 项目中 Flexbox 的 CSS 练习。这是自检：

自检

• 所有项目和标题边缘之间都有空间（具体的像素数量在这里并不重要）。
• 徽标垂直和水平居中。
• 列表项是水平的，并且在标题内垂直居中。
• 左链接和右链接被一直推向左侧和右侧，并且在调整页面大小时停留在标题的边缘。
• 您的解决方案不使用浮动、内联块或绝对定位。

然而，类 left-links 的 div 中有额外的空间，这对于 HTML 或 CSS 代码中为什么存在它没有意义，因为我自己没有添加任何空间。

它应该看起来像这样： 但这就是我得到的：

我尝试了很多方法将左侧链接推到左侧但无济于事。

.header {
  font-family: monospace;
  display: flex;
  background: papayawhip;
  justify-content: space-between;
  padding: 9px 4.5px;
}

.logo {
  font-size: 48px;
  font-weight: 900;
  color: tomato;
  background: white;
  padding: 4px 32px;
}

ul {
  /* this removes the dots on the list items*/
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  gap: 9px;
}

a {
  font-size: 22px;
  background: white;
  padding: …