Question

我创建的对象内部具有数组，文本和图像，我希望通过该对象进行映射以呈现新组件，是否可以通过这样的图像进行映射？因为当我的新组件通过道具传递时，我的新组件无法检测到任何图片，并且不知道我做错了什么，或者那样做是不可能的。

import firstProjectPhoto from '../img/picOne.png';
import secondProjectPhoto from '../img/picTwo.png';
import thirdProjectPhoto from '../img/picThree.png';
import ListOfProjects from "./subcomponents/ListOfProjects";


const projects = [{
    photo:[{firstProjectPhoto},{secondProjectPhoto},{thirdProjectPhoto}],
    },
    {
    text:["Project number one", "Project number two", "Project number 3"],
    }];



class Projects extends Component {
    render() {
        return (
            <Grid className="text-center" id="listOfProjects">
                <PageHeader className="projects-header">My Projects</PageHeader>
                {projects.map(e => 
                    <ListOfProjects
                    photo={e.photo}
                    text={e.text}
                    />
                )}
            </Grid>
        );
    }
}

export default Projects;

新组件

class ListOfProjects extends Component {
    render() {
        return (
            <Row className="show-grid text-center projects-list">
                <Col xs={1} sm={1} className="projects">
                    <Image src={this.props.photo} thumbnail responsive/>
                    <p>{this.props.text}</p>
                </Col>
            </Row>
        );
    }
}

export default ListOfProjects;

已更新：

实际上，我们已经取得了一些进展，谢谢：）问题出在const项目的结构中，但是它仍然显示img src为[object Object]而不是普通图片

const projects = [{
        photo: {firstProjectPhoto},
        text:"first project"
    },
    {
        photo: {secondProjectPhoto},
        text:"second project"
    },
    {
        photo: {thirdProjectPhoto},
        text:"third project"
    }
]


           <Grid className="text-center" id="listOfProjects">
                <PageHeader className="projects-header">
My Projects    </PageHeader> 
                {projects.map((e,i) =>
                    <ListOfProjects
                    photo={e.photo}
                    text={e.text}
                    key={i}
                    />
                )}
            </Grid>

已更新

我应该没有{} 现在工作正常：)谢谢大家的帮助

Answer 1

projects对象的结构不是您所期望的。你想要

projects = [
  {
    photo: projectPhoto,
    text: projectText
  },
  ...
]

但是你有

projects = [
  { photo: [...] },
  { text: [...] }
]

您还忘记为循环中呈现的每个项目添加key：

{projects.map((e, idx) => 
  <ListOfProjects
    photo={e.photo}
    text={e.text}
    key={idx} // <-- here
    />
)}

Answer 2

问题在于您的项目的数据结构。它的定义是一个对象数组，其中key在数组中。尝试调整您的项目结构。

const projects = [{
    photo:'firstProjectPhoto':text:'Project number one'
    },
   {photo:'secondProjectPhoto':text:'Project number two'},
    {photo:'thirdProjectPhoto',:text:'Project number three'}
    ];

Answer 3

假设您要传递虚拟的db代码，即使它不是理想的，但出于测试目的，也应按以下步骤进行操作：

class Projects extends Component {

const projects = [
    {
        photo:firstProjectPhoto,
        text: "Project number one"
    },
    {
        photo:secondProjectPhoto,
        text: "Project number two"
    },
    {
        photo:thirdProjectPhoto,
        text: "Project number three"
    },
];

render() {
    return (
        <Grid className="text-center" id="listOfProjects">
            <PageHeader className="projects-header">My Projects</PageHeader>
            {projects.map(e => 
                <ListOfProjects
                projects={projects}
                />
            )}
        </Grid>
    );
}
}

Answer 4

考虑以下JSON数据结构是解决问题的一种方法。但是您提供的json数据不会被评论。每个图像都应在同一对象中具有其名称。

class ListOfProjects extends Component {
    render() {
    let images = [];
    const { photo, text } = this.props;
    photo.map((p, i) => {
      images.push(<Col xs={1} sm={1} className="projects">);
      images.push(<div key={i}>
      <Image src={p} thumbnail responsive/>
      <p>{text[i]}</p></div>
      );
      images.push(</Col>);
    });
        return (
            <Row className="show-grid text-center projects-list">
               {images} 
            </Row>
        );
    }
}

export default ListOfProjects;

反应-通过图像数组进行映射

4 个答案: