时间戳

首页 > 解决方案 > 如何在reactJS中将图像传递给this.state

javascript - 如何在reactJS中将图像传递给this.state

问题描述

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

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

单击后，图像将变成不同的图像。

Tic Tac Toe：空框---->点击后显示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') },
      ]
    };
  }

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

标签： javascriptreactjs

解决方案

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

尝试这个：

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 /> },
      ]
    };
  }
  ...

推荐阅读