Question

我有一个Portfolio组件，它将通过用于图像源的字符串数组传递到一个名为Piece的组件。该作品将代表我所做的每件作品，并显示从作品集发送的四幅图像。

Portfolio呈现：<Piece examples = {cars} image = "images/icons/laptop-cars.png" title = "Project Car" /> Cars是具有图像源的数组的名称。

由于Piece将具有图像库，所以我还创建了一个名为Gallery的组件。我正在尝试将数组从“投资组合”传递到“画廊”，但这对我不起作用。

在片断中，我渲染：let images = this.props.examples;并返回

在图库中，我再次有let images = this.props.images，然后尝试通过说出</div> {images.map(each => <img src = {each} alt = "" width = "300px"/>)} </div>

来返回数组。

这将显示一个错误，表明图像在Gallery组件中未定义。

有人可以告诉我如何让Piece正确地通过它作为Gallery的道具吗？

谢谢。

道具：

export default class Piece extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isClicked: false
        };
        this.toggleGallery = this.toggleGallery.bind(this);
    }
    toggleGallery() {
        this.setState(state => ({
            isClicked: !state.isClicked
        }));
    }
    render() {
        let images = this.props.examples;
        return(
            <div id = "piece">
                <div id = "piece-container">
                    <div id = "details">
                        <div id = "piece-image">
                            <img src={this.props.image} alt=""/>
                        </div>
                        <div id = "work-description">
                            <h2> {this.props.title}</h2>
                            <p> {this.props.description}</p>
                        </div>   
                    </div>
                    <div id = "link">
                    <a href="#" onClick={this.toggleGallery}> Please click here to view examples of this work. </a>
                    </div>
                </div>
                <div id = {this.state.isClicked ? "car-gallery" : "hidden"}>
                    <Gallery imageArray = {images} link = "link to source"/>
                </div>
            </div>
        );
    }
}

画廊：

export default class Gallery extends React.Component {
  constructor() {
    super();
  }
    render() {
      let images = this.props.imageArray;
      return (
        <div className="gallery-container">
           <div id = "link" >
           <a target="_blank" href={this.props.link}>Click here to see a live version</a>
           </div>
          {images.map(each => <img src = {each} alt = "" width = "300px"/>)}
        </div>
      )
    }
  }

组合：

import React from 'react'; 
import Piece from '../Piece/Piece';

const array1= [
    "image1.jpg",
    "image2.jpg",
    "image3.jpg",
    "image4.jpg"
];

const array2= [
    "image1.jpg",
    "image2.jpg",
    "image3.jpg",
    "image4.jpg"
];

export default class Portfolio extends React.Component {
    render() {
        return(
            <div id = "portfolio">
                <h1> Please find below some examples of my work</h1>
               <Piece examples = {array1} image = "image of piece" title = "Title of piece." />

                <Piece examples = {array2} image = "image of piece" title = "Title of piece." />

            </div>
        );
    }
}

对通过组件的传递道具做出反应

0 个答案: