Javascript 如何在map（）函数中获取react道具

假设我有一个带有props

active

的react函数

// About Page
export default function About() {
  return <Menu active="about" />;
}

// Menu Component
function Menu(props) {
  const items = ["home", "about", "services", "contact"];

  return (
    <nav>
      {items.map((item, index) => {
          console.log(props);
        return <li className={`${props.active === item && "active"}`}> {item} </li>;
      })}
    </nav>
  );
}

//关于第页
导出默认函数About（）{
返回；
}
//菜单组件
功能菜单（道具）{
const items=[“主页”、“关于”、“服务”、“联系人”]；
返回(
{items.map（（项，索引）=>{
控制台日志（道具）；
返回
{item}
；
})}
);
}

---

如何在map（）函数中获得

props.active

？它现在正在返回未定义的

。
转换为snippet，似乎道具得到了正确的使用。
（如果在类名生成中使用
&&
，则不相关，但有小的修正，因为falsy条件的类名将为“false”）


函数About（）{
返回；
}
功能菜单（道具）{
const items=[“主页”、“关于”、“服务”、“联系人”]；
返回(
{items.map（（项，索引）=>{
控制台日志（道具）；
返回(
{item}
);
})}
);
}
ReactDOM.render（，document.getElementById（'app'））
.active{
颜色：红色
}
.不活跃{
颜色：灰色
}
上述示例代码工作完美

在我的项目中，我实际上修改了错误的页面以提供道具，因此得到了{}

所以，我写这个答案是为了让其他人不会花时间在上面。
我觉得你的代码很好，
道具应该在你访问它的地方可用。是不是因为你用了
class=
而不是
className=
？你有没有控制台，看看它是否真的是props.active，这是未定义的。因为rest看起来很好，正如@ClaireLin所指出的。我做了console.log，它返回了
{}
类而不是类名是问题中的一个打字错误。修复了它。你在App.js或index.js中使用它的位置和方式？你能添加那块代码吗？
map（）之外的
props
值是多少？它还没有定义吗？