React 在数组中添加多张照片

问题描述

我是 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,category: 'Visuomeniniai',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

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

解决方法

好的，您必须在 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;

,

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

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

}

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

const data = [
{
    id:1,skardis3]

},{
    id:2,image: car,category: 'Visuomeniniai',projectiamges:  skardis3

}]

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

然后在你的渲染中：

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

我不太明白您是要遍历 const data 中每件商品的照片，还是只遍历第一张照片，请准确说明您要执行的操作。

,

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

在---在此处显示我的所有照片-----这一行之后添加此内容。它将遍历该内部数组并显示这些图像。

,

您可以将 projectimages 定义为数组：

projectimages: [skardis2,skardis3]

然后在您的 Menu 组件中，您只需添加另一个 map() 来为 every projectimages 迭代 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;