javascript - React - 通过图像数组映射
问题描述
我已经创建了其中包含数组、文本和图像的对象,我希望通过它进行映射以呈现新组件,是否可以通过这样的图像进行映射?因为我的新组件在通过道具传递时没有检测到任何图片,并且不知道我是否做错了什么,或者不可能那样做。
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>
更新
我应该没有{} 现在工作得很好:) 谢谢大家的帮助
解决方案
对象的结构projects
不是您所期望的。你要
projects = [
{
photo: projectPhoto,
text: projectText
},
...
]
但是你有
projects = [
{ photo: [...] },
{ text: [...] }
]
您还忘记为key
循环中呈现的每个项目添加一个:
{projects.map((e, idx) =>
<ListOfProjects
photo={e.photo}
text={e.text}
key={idx} // <-- here
/>
)}
推荐阅读
- javascript - Python:如何对语句进行分组,例如 JavaScript 如何使用括号进行分组
- mule - 在 mule 中将没有密钥的 Json 数组转换为 SOQL 格式
- oracle - 从 EXECUTE IMMEDIATE PLSQL 输出结果
- reactjs - D3.js + React - 在折线图中显示多个工具提示
- web-services - JEE 如何决定是使用 SOAP 1.1 还是 SOAP 1.2 来实现 SOAP 服务?
- android - Unity 中 PlayerPrefs 的问题?
- java - 正则表达式字符串中的两个相等字符
- checkbox - 填写复选标记时的时间戳脚本和公式
- haskell - 如何在`hedgehog`中使用`GenT`
- python - 如何在 python websocket 服务器握手响应中设置“Sec-WebSocket-Protocol”标头?