React 在数组中添加多张照片

Question

我是 React 新手，解释起来很复杂但是。我想在数组中放置不止一张照片。

我创建了一个 data.js 文件

import car from '../../images/Logo.png';
import skardis1 from '../../images/projects/1.jpg'
import skardis2 from '../../images/projects/2.jpg'
import skardis3 from '../../images/projects/3.jpg'

const data = [
    {
        id:1,
        image: skardis1,
        title: 'PAVADINIMAS',
        category: 'Privatūs',
        description: 'ČIA KAŽKOKS TEKSAS',
        projectimages: // i want to put here more photos for example: skardis2, skardis2, skardis3

    },
    {
        id:2,
        image: car,
        title: 'PAVADINIMAS',
        category: 'Visuomeniniai',
        description: 'ČIA KAŽKOKS TEKSAS',
        projectiamges:  skardis3

    },
    
];
export default data;

我也想把它渲染到这里来一张一张地看所有照片

Menu.js

import React from 'react';
import {Animated} from "react-animated-css";

function Menu({menuItem}) {
    return (
        <div className="item">
            {
            menuItem.map((item) => {
                    return  <div className="item-con" key={item.id}>
                        <Animated animationIn="fadeIn" animationOut="fadeOut" animationInDuration={1800} animationOutDuration={2400} isVisible={true}>
                            <div className="item-container">
                                <img src={item.image} alt=""/>
                                <h2>{item.title}</h2>
                                <p>{item.description}</p>
                                ---SHOW MY ALL PHOTOS HERE-----
                            </div>
                        </Animated>
                    </div>
                })
            }
        </div>
    )
}

export default Menu;

index.js 文件

import React, { useState } from 'react';

import Menu from './Menu';
import Button from './Button';
import data from './Data';
import './style.css';

const allCategories = ['Visi', ...new Set(data.map(item => item.category))];


const Projects = () => {


    const [menuItem, setMenuItem] = useState(data);
  const [buttons, SetButtons] = useState(allCategories);
  // console.log(data);

  const filter = (button) => {
    if(button === 'Visi'){
      setMenuItem(data);
      return;
    }
    const filteredData = data.filter(item => item.category === button);
    setMenuItem(filteredData);
  }

    return (
        <div id="projects" className="App">
        <div className="title">
            Projektai
        </div>
        <Button button={buttons} filter={filter}/>
        <Menu menuItem={menuItem}/>
      </div>
    )
}

export default Projects

也许有人理解我并可以解释如何做到这一点。我是新来的，所以不要评判我。谢谢

Answer 1

好的，你必须在你的 Menu.js 中导入 data.js 让我用代码来解释你，你正在使用 {menuitem} 作为道具，在这种情况下你不需要它：

import React from 'react';
import {Animated} from "react-animated-css";
import data from "./data"

function Menu() {
    return (
        <div className="item">
            {
            data.map((item) => {
                    return  <div className="item-con" key={item.id}>
                        <Animated animationIn="fadeIn" animationOut="fadeOut" animationInDuration={1800} animationOutDuration={2400} isVisible={true}>
                            <div className="item-container">
                                <img src={item.image} alt=""/>
                                <h2>{item.title}</h2>
                                <p>{item.description}</p>
                                ---SHOW MY ALL PHOTOS HERE-----
                            </div>
                        </Animated>
                    </div>
                })
            }
        </div>
    )
}

export default Menu;

Answer 2

你所要做的就是在 [] 中添加你的变量名：这样一个完整的例子看起来像这样：

{
    id:1,
    image: skardis1,
    title: 'PAVADINIMAS',
    category: 'Privatūs',
    description: 'ČIA KAŽKOKS TEKSAS',
    projectimages: [skardis1, skardis2, skardis3] <--

}

然后要在视图中显示您的照片，您可以在 const data 之后添加以下代码，如下所示：

const data = [
{
    id:1,
    image: skardis1,
    title: 'PAVADINIMAS',
    category: 'Privatūs',
    description: 'ČIA KAŽKOKS TEKSAS',
    projectimages: [skardis1, skardis2, skardis3]

},
{
    id:2,
    image: car,
    title: 'PAVADINIMAS',
    category: 'Visuomeniniai',
    description: 'ČIA KAŽKOKS TEKSAS',
    projectiamges:  skardis3

}]

const allphotos = data[0].projectiamges.map((img) =>  <li><img src={img}></li>);

然后在你的渲染中：

    ReactDOM.render(
  <ul>{allphotos}</ul>,  document.getElementById('root')
);

我不太明白你是想循环遍历 const data 中每个项目的照片还是只循环遍历第一张照片，请准确说明你要做什么。

Answer 3

projectimages.map((img, i) => (
  <div key={i}>
    <img src={img} alt='youralt' />
  </div>
))

在---SHOW MY ALL PHOTOS HERE-----这一行之后添加这个。它将遍历该内部数组并显示这些图像。

Answer 4

您可以将 projectimages 定义为数组：

projectimages: [skardis2, skardis2, skardis3]

然后在您的 Menu 组件中，您只需添加另一个 map() 来迭代 projectimages for every item：

import React from "react";
import { Animated } from "react-animated-css";

function Menu({ menuItem }) {
  return (
    <div className="item">
      {menuItem.map((item) => (
        <div className="item-con" key={item.id}>
          <Animated animationIn="fadeIn" animationOut="fadeOut" animationInDuration={1800} animationOutDuration={2400} isVisible={true}>
            <div className="item-container">
              <img src={item.image} alt="" />
              <h2>{item.title}</h2>
              <p>{item.description}</p>
              {item.projectimages.map((pImage) => (
                <img src={pImage} alt="" />
              ))}
            </div>
          </Animated>
        </div>
      ))}
    </div>
  );
}

export default Menu;

React 在数组中添加多张照片

React add more than one photo in array

arrays

photo

reactjs