javascript - 将图像作为对象放入状态变量并将其作为 Prop 传递

Question

我试图将图像作为对象放入状态并将状态作为 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 传递。

Answer 1

这里的问题是您正在执行 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} />
  );
}