Я создаю сайт. Я начинающий. У меня есть проблема. У меня есть массив реагирующих компонентов. Я не знаю, могу ли я использовать компоненты React в качестве элементов массива. Это изображения, импортированные из папки моего проекта. Кроме того, у меня есть множество названий новостных компаний. Идея состоит в том, чтобы создать блоки с именем и изображением выше. Я хочу создавать блоки в соответствии с длиной массива моих изображений. Итак, если длина этого массива равна 4, карточек у меня 4. Проблема в том, что я не могу отображать изображения, я импортировал их в свой проект. Основной код находится в компоненте главной страницы. Кроме того, у меня есть компонент под названием Author Card. В нем у меня есть компонент React, который получает имя и изображение в качестве реквизита и помещает их в блок Html карты.
Вот мой код компонента главной страницы:
import React from 'react';
import AuthorCard from "./MainPageComponents/AuthorCard";
import BBC_Logo from '../assets/images/BBC_Logo.png';
import FOX_Logo from '../assets/images/FOX_Logo.png';
import CNN_Logo from '../assets/images/CNN_logo.png';
import ForbesLogo from '../assets/images/forbes-logo.png';
function MainPage(props) {
const channels = [
{
name: 'BBC',
index: 1
},
{
name: 'FOX',
index: 2
},
{
name: 'CNN',
index: 3
},
{
name: 'FORBES',
index: 4
},
];
const logos = [
<BBC_Logo key = {1} />,
<FOX_Logo key = {2}/>,
<CNN_Logo key = {3}/>,
<ForbesLogo key = {4}/>
];
return (
<div className = "main-page">
<div className = "main-page_container">
<section className = "main-page_channels">
{channels.map( (channel) => {
logos.map( (logo) => {
return <AuthorCard name = {channel.name} img = {logo} />
})
})}
</section>
</div>
</div>
);
}
export default MainPage;
Вот код компонента моей карты автора:
import React from 'react';
function AuthorCard(props) {
return (
<div className = "author-card">
<div className = "author-img">
{props.img}
</div>
<div className = "author-name">
{props.name}
</div>
</div>
);
}
export default AuthorCard;
Пожалуйста помоги!
Здесь мы используем функцию карты для перебора массива каналов и рендеринга компонента AuthorCard для каждого канала. В компонент AuthorCard мы передаем свойство name, а также соответствующий логотип из массива logos.
Обратите внимание, что мы также передаем key prop компоненту AuthorCard, чтобы помочь React уникально идентифицировать каждый компонент. В этом случае мы используем свойство index каждого объекта канала.
Проблема не в карте или ключевом индексе. Проблема в том, что я не могу использовать компонент React в качестве элемента массива. Потому что что-то не так с массивом логотипов. Да, мне нужна только одна карта. Результат лучше, но проблема та же.
Я бы поступил с этим немного по-другому. Во-первых, то, как вы импортируете свои логотипы, не импортируется как компонент. Скорее вы получаете путь/источник изображения, который затем можно использовать в компоненте. Подробнее об этом читайте здесь: https://create-react-app.dev/docs/adding-images-fonts-and-files/
Таким образом, я бы сделал это, поместив логотип img src в ваш массив каналов, а затем передал этот img src компоненту AuthorCard. Затем в компоненте AuthorCard вы используете компонент для рендеринга изображения. Так:
import React from "react";
import BBC_Logo from "../assets/images/BBC_Logo.png";
import FOX_Logo from "../assets/images/FOX_Logo.png";
import CNN_Logo from "../assets/images/CNN_logo.png";
import ForbesLogo from "../assets/images/forbes-logo.png";
export default function App() {
return (
<div className = "App">
<MainPage />
</div>
);
}
const channels = [
{
name: "BBC",
index: 1,
img: BBC_Logo
},
{
name: "FOX",
index: 2,
img: FOX_Logo
},
{
name: "CNN",
index: 3,
img: CNN_Logo
},
{
name: "FORBES",
index: 4,
img: ForbesLogo
}
];
function MainPage(props) {
return (
<div className = "main-page">
<div className = "main-page_container">
<section className = "main-page_channels">
{channels.map((channel) => {
return <AuthorCard name = {channel.name} img = {channel.img} />;
})}
</section>
</div>
</div>
);
}
function AuthorCard(props) {
return (
<div className = "author-card">
<div className = "author-img">
<img src = {props.img} alt = "author card" />
</div>
<div className = "author-name">{props.name}</div>
</div>
);
}
Ваш код не работает. Вот ошибка, которую я получил: Не удалось выполнить «createElement» в «Документе»: предоставленное имя тега («/static/media/forbes-logo.62fe1e387d124a1f5969.png») не является допустимым именем.