Блог

Главная - Вопросы по программированию - невозможно сопоставить через импорт реагирующих компонентов с помощью перехватов

невозможно сопоставить через импорт реагирующих компонентов с помощью перехватов

#reactjs #react-hooks #render #use-state

#reactjs ( реакция ) #реагирующие крючки #визуализация #состояние использования #reactjs #реагирующие перехваты

Вопрос:

Я новичок в react, так что это может быть вопрос новичка. Я пытаюсь создать боковую панель, которая отображает только ссылки в зависимости от того, задана ли переменная.

но сначала я просто пытаюсь создать перехватчик useState, представляющий собой массив импортируемых компонентов, и сопоставить их с некоторыми фиктивными данными.

Проблема в том, что он продолжает сообщать мне, что компонент не определен, когда пытается сопоставить их.

ошибка: TypeError: Не удается прочитать свойство ‘SideBarLink’ неопределенного

Что я делаю не так? Также, если есть лучший способ сделать то, что я пытаюсь угодить lmk.

Боковая панель.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;

Ссылка на боковой панели.jsx————————————-

 import React from 'react';

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

Комментарии:

1. Эй, @Gandi, я не уверен, почему ты так сопоставляешь. Но, можете ли вы попробовать sidelinks.map((link, i) => <SideBarLink key={i} {...link} /> .

2. Также ваш useState кажется неправильным, я не знаю, действительно ли это в, jsx но в js вам не нужно переносить свои объекты внутрь SideBarLink .

3. @bertdida спасибо за ответ, если есть лучший способ сделать это? Я новичок в react. Я пытаюсь создать перехват с состоянием использования, представляющим собой массив импортированного компонента SideBarLink

4. Это должно сработать, useState([ {id:1, name: "name 1"}, {id:2, name: "name 2"} ]); . И затем вы сопоставляете их, как я предлагал в своем первом комментарии.