我试图将图像作为对象放入状态并将状态作为 react 中的 Prop 传递,但它没有传递任何内容。
import xaprikaScreen from "./images/xaprikaScreenShot.jpg";
import linguadenScreen from "./images/linguadenScreenShot.jpg";
export class Portfolio extends Component {
constructor() {
super();
this.state = {
currentProject: 0,
projects: [
{
id: 1,
projectName: "Linguaden.com",
projectLink: "www.linguaden.com",
githubLink: "",
displayPicture: { linguadenScreen },
projectDescription: ""
},
{
id: 2,
projectName: "Xaprika.com",
projectLink: "www.Xaprika.com",
githubLink: "",
displayPicture: { xaprikaScreen },
projectDescription: ""
}
]
};
}
render() {
return (
<Projects imageSource={this.state.projects[this.state.currentProject["displayPicture"]}/>
);
}
}
}
这里我导入了 2 个图像作为对象,然后我将它们分配到状态中,然后我尝试将这些变量作为 Prop 传递。
最佳答案
这里的问题是您正在执行 this.state.currentProject["displayPicture"]
。 currentProject
的值为 0
,并且 0.displayPicture
未定义。然后,您将执行 this.state.projects[this.state.currentProject["displayPicture"]
,它不仅没有右括号,即使有右括号也相当于 this.state.projects[undefined]
也是未定义的。
用下面的代码替换你的渲染函数,它应该可以工作。
render() {
return (
<Projects imageSource={this.state.projects[this.state.currentProject].displayPicture} />
);
}
关于javascript - 将图像作为对象放入状态变量并将其作为 Prop 传递,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55325563/