如何在reactJS中将图像传递给this.state答案

【问题标题】：How to pass image to this.state in reactJS如何在reactJS中将图像传递给this.state
【发布时间】：2020-08-14 00:58:43
【问题描述】：

我正在尝试修改井字游戏教程(https://codepen.io/gaearon/pen/ybbQJX?editors=0010)。

我想将 9 个不同的图像及其标题传递给初始方块，而不是 null。

点击后，图片会变成不同的。

井字游戏：空框---->点击后显示X

我的版本：图像（旧）和标题 ------> 点击后显示不同的图像（新）（A1-old 到 A1-new，A2-old 到 A2-new）

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: [
        { title: "A1", image: require('../img/A1-old.png') },
        { title: "A2", image: require('../img/A2-old.png') },
      ]
    };
  }

然后我卡在第一步，显示图像............

【问题讨论】：

您可能应该使用图像 URL 或读取图像并将其转换为 base64

标签： javascript reactjs

【解决方案1】：

我认为您不会因为加载图像的方式而遇到问题（我尝试了@Michael 的回答，但它没有为我加载图像，而您的代码有效。）

Here 是我为检查您的解决方案而编写的最少代码，它对我来说非常有效。也许可以尝试编辑您的帖子，为您的问题添加更多背景信息。

【讨论】：

是的，您的代码有效！！！由于我没有更改原始代码，可能是渲染部分引起的
太棒了！我希望你能找到问题。 :)

【解决方案2】：

您应该在父组件中导入图像，然后将它们像组件一样传递给子组件。

试试这个：

import A1Old from '../img/A1-old.png'
import A2Old from '../img/A2-old.png'

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: [
        { title: "A1", image: <A1Old /> },
        { title: "A2", image: <A2Old /> },
      ]
    };
  }
  ...

【讨论】：