Question

所以，这是我使用JavaScript的第一周，并且正在尝试在ReactJs中创建棋盘游戏。正在使用数组生成板及其正方形，并且如果array [0] ='w'，则正方形将显示一个文本，该文本将保留在数组中的相应索引 ie 上，板看起来像{ {3}} 但是，尝试做的是使图像出现在正方形的表面而不是字母。

我尝试了array [0] = {imgurl}，但没有任何进展。我该如何实现？

这是我的App.js

import React, { Component } from 'react';
import './App.css';
import player from './player.png'

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      board: Array(Math.pow(2,2)).fill(''),
      sqr: {width:'50px',height:'50px'},
      brd: {width:'100px',height:'100px'}
    }
    this.state.board[0]='w'
  }

  render() {
    return (
      <div className="app-container">
        <div style={this.state.brd} className="board" >

        {this.state.board.map((cell) => {
          return <div style={this.state.sqr} className="square">{cell}</div>;
        })}

        </div>

      </div>
    )
  }
}

export default App;

这是我的App.css

.board {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: 10%;

}

.square {
  box-sizing: border-box;
  border: 2px solid black;
  font-size: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 1

我认为您想将player.png安装在图片中带有“ w”字母的单元格上吗？

您可以使用类似的内容：

{this.state.board.map((cell, index) => {
    if (index === 0) {
          return <div
            style={Object.assign({background: `url(${player})`}, this.state.sqr)}
            className="square">
            {cell}
            </div>;
    }
})}

如果要动态安装图像，可以将正方形的默认样式导出到.css文件，并以更舒适的方式直接在.map循环中处理背景图像样式，而无需必须Object.assign。

ReactJs：显示来自URL数组的图像列表

1 个答案: