Javascript 通过组件传递道具进行反应

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

公文包渲染：

Cars是包含图像源的数组的名称

由于这件作品将有一个图像库，我还创建了一个名为gallery的组件。我正在尝试将阵列从公文包传递到图库，但这对我不起作用

在片段中，我呈现：

let images=this.props.examples并返回

在Gallery中，我再次使用了
let images=this.props.images
，然后我尝试通过说：

{images.map（每个=>）}

这将显示一个错误，其中表示“库”组件中的图像未定义

有人能告诉我如何让这件作品作为道具正确地通过画廊吗

谢谢

道具：

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>
      )
    }
  }

导出默认类扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
isClicked:错误
};
this.toggleGallery=this.toggleGallery.bind（this）；
}
toggleGallery（）{
this.setState（state=>({
isClicked:！state.isClicked
}));
}
render（）{
让images=this.props.examples；
返回(
{this.props.title}
{this.props.description}

);
}
}

图库：

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>
      )
    }
  }

导出默认类库扩展React.Component{
构造函数（）{
超级（）；
}
render（）{
让images=this.props.imageArray；
返回(
{images.map（每个=>）}
)
}
}

投资组合：

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>
        );
    }
}

从“React”导入React；
从“../Piece/Piece”导入工件；
常数数组1=[
“image1.jpg”，
“image2.jpg”，
“image3.jpg”，
“image4.jpg”
];
常数数组2=[
“image1.jpg”，
“image2.jpg”，
“image3.jpg”，
“image4.jpg”
];
导出默认类公文包扩展React.Component{
render（）{
返回(
请在下面找到一些我工作的例子
);
}
}
请显示
作品
和
画廊
的完整代码^^@moonwave99现已编辑，很抱歉
画廊
的构造器没有通过
道具
的测试-请在
作品
中进行类似操作。画廊的构造器缺少道具。最好是删除构造函数，因为你不需要特殊的逻辑。@moonwave99我在构造函数中添加了道具，就像在片段中一样，但它仍然会给出相同的错误。完全删除构造函数仍然会产生相同的错误。