javascript - 如何在 React 中将图像作为道具传递？

Question

如何将图像作为道具传递？源={}

在 src 内部不作为道具拦截

在 Card.js 中，我有两种类型的道具。任何一种类型的道具都来自 data.js 对象属性（图像）和我单独添加的其他类型（文本、开关）。

（我在没有 CSS 的情况下公开了这个。）

data.js 数据库组件

import React, { Component } from 'react';

const data = {
    "properties": [
    {
        "_id": "fsdfsd23r42133er12",
        "index": 0,
        "image":"WebPage1",     
    },
    {
        "_id": "fsdfsd23r42133er13",
        "index": 1,
        "image":"WebShop1", 
    },
    {
        "_id": "fsdfsd23r42133er14"
        "index": 2,
        "kep":"Development1", 
    },
  
    ]
}

export default data;

Slider.js 父组件

import React, { Component } from 'react';
import data from '../../data/data';
import Card  from './Card';
import ArrowRight from '../../assets/Card/ArrowRight.PNG';
import ArrowLeft from '../../assets/Card/ArrowLeft.PNG';
import Webpage1 from '../../assets/Ajanlas/Jo/WebPage500.jpeg'
import WebShop1 from '../../assets/Ajanlas/Jo/WebShop500.jpeg';
import Development1 from '../../assets/Ajanlas/Jo/Development500.jpeg';

class Slider extends Component {
  constructor(props){
    super(props);
    this.state = {
    properties: data.properties,
    property: data.properties[0],
    switch:false,
    }
  }
  
    nextProperty = () => {
    const newIndex = this.state.property.index+1;
    this.setState({
      property: data.properties[newIndex],     
    })
    }
    
    prevProperty = () => {
    const newIndex = this.state.property.index-1;
    this.setState({
      property: data.properties[newIndex],     
    })
  }

  render() {

    const {properties, property} = this.state;
    return (    
      <div>
            <button 
              onClick={() => this.prevProperty()} 
            </button>
            
            <button 
              onClick={() => this.nextProperty()}     
           </button>           
       </div>

      <div>   
               <div>                
                 {properties.map(property => <Card  key={property._id} property={property}
                 image={image}
                 text="Some text"
                 switch={this.state.switch}
                 }
               </div>     
      </div>
     
    );
  }
}

export default Slider;

Card.js 子组件

import React from 'react';
import PropTypes from 'prop-types';
import Webpage1 from '../../assets/Ajanlas/Jo/WebPage500.jpeg'
import WebShop1 from '../../assets/Ajanlas/Jo/WebShop500.jpeg';
import Development1 from '../../assets/Ajanlas/Jo/Development500.jpeg';

const Card = ({property, text, switch}) => {
    const {index, image} = property;

    return (
              <div>
                   {text}  
                   {switch}
                   <img src={image} alt='WebPage'/>  
               </div>                  
    )
}

Card.propTypes = {
    property: PropTypes.object.isRequired,
    switch: PropTypes.string.isRequired,
    image: PropTypes.string.isRequired,
}

export default Card;

标签： javascriptreactjs

Answer 1

它可能不是最优雅的解决方案，但它是一种解决方案：

滑块.js

import React, { useState } from "react";
import Data from "../utils/data";
import Card from "../Card/Card";
import "./Slider.css";

const Slider = () => {
  const [cardIndex, setcardIndex] = useState(0);

  const nextProperty = () => {
    setcardIndex((cardIndex) => {
      return cardIndex + 1;
    });
  };

  const prevProperty = () => {
    setcardIndex((cardIndex) => {
      return cardIndex - 1;
    });
  };

  return (
    <div>
      <h1>Slider</h1>
      <div className="outer-slider">
        <button onClick={prevProperty}>Prev</button>
        {console.log(Data.index)}
        <Card
          id={Data[cardIndex]._id}
          index={Data[cardIndex].index}
          image={Data[cardIndex].image}
        />
        <button onClick={nextProperty}>Next</button>
      </div>
    </div>
  );
};

export default Slider;

数据.js

const data = [
  
    {
        "_id": "fsdfsd23r42133er12",
        "index": 0,
        "image":"../../image/R.png",     
    },
    {
        "_id": "fsdfsd23r42133er13",
        "index": 1,
        "image":"../../image/S.png", 
    },
    {
        "_id": "fsdfsd23r42133er14",
        "index": 2,
        "image":"../../image/T.png", 
    },
    {
        "_id": "fsdfsd23r42133er15",
        "index": 3,
        "image":"../../image/U.png", 
    },
    {
        "_id": "fsdfsd23r42133er16",
        "index": 4,
        "image":"../../image/V.png", 
    },
    {
        "_id": "fsdfsd23r42133er17",
        "index": 5,
        "image":"../../image/Z.png", 
    }
  
    ]

卡片.js

import React from "react";
import "./Card.css";

const Card = (props) => {
  return (
    <div className="card-outer">
      <h1>This is one card</h1>

      <ul>
        <li>Id: {props.id}</li>
        <li>Index: {props.index}</li>
        <li>Image: {props.image}</li>
      </ul>
      <img src={props.image}></img>
    </div>
  );
};

export default Card;