Question

我是新来的人，所以这可能是一个菜鸟问题。我试图创建一个侧栏，仅根据是否设置了变量显示链接。

但是首先，我只是试图创建一个useState挂钩，该挂钩是导入组件的数组，并使用一些虚拟数据在它们之间进行映射。

问题在于，当试图通过它们映射时，它总是告诉我该组件是不确定的。

error：TypeError：无法读取未定义的属性'SideBarLink'

我在做什么错？另外，如果有更好的方法来做我想让lmk满意的事情。

SideBar.jsx -------------------------------------------- ----------

]

import React, { useState } from 'react';
import SideBarLink from 'react';


const SideBar = () => {
   
    const [sidelinks, setSideLinks] = useState( SideBarLink[
        {
          id:   1,
          name: 'Projects',
          displayLink: true
        },
        {
          id:   2,
          name: 'Tickets',
          displayLink: true
        }
    ]);
   
  const  handleClick =() =>
   {
    console.log(sidelinks);
   }
   
 
   let  slinks = (
    <div>
        <button onClick={handleClick}>button</button>
        <div className="w3-sidebar w3-bar-block" >
        { 
            sidelinks.SideBarLink.map((SideBarLink, index) => 
                {
                return <SideBarLink />
                })     
        }
        </div>
      
    </div>
    );

   
   
    return slinks;
}
 
export default SideBar;

SideBarLink.jsx -------------------------------------

import React from 'react';

const SideBarLink = ( props ) => {
  return (
  <a href="#" className="w3-bar-item w3-button">{props.name}</a>
  )
 };
 
 export default SideBarLink;

无法使用挂钩通过导入React组件进行映射

0 个答案: