使用 reactjs 在 tic tac toe 应用程序中渲染图像

Question

我正在尝试使用 reactjs 创建一个简单的井字游戏应用程序，其中有两种模式：Classic 和 Image，在在经典模式下，我有显示 X 和 O 的选项，而在图像模式下，我有两个显示两个图像的选项以下。我的文件结构是：

src
  components
    ChooseGameMode.js
    choosePlayer.js
    GameStatus.js
    Status.js
  images
    connery.svg
    square.svg
App.css
App.js
index.css
index.js
...

以下是我开发的代码：

App.js

import React, { Component } from 'react';

import './App.css';

import Status from'./components/Status';
import GameStatus from'./components/GameStatus';

class App extends Component {


  constructor(props){

    super(props)

    this.state = {

      board : Array(9).fill(null),
      player : null,
      winner : null,
      gamemode : null,
      /* array to store the ndex */
      order_ndex : []
    }

  }

  checkWinner(){

    let winLines =
      [
        ["0", "1", "2"],
        ["3", "4", "5"],
        ["6", "7", "8"],
        ["0", "3", "6"],
        ["1", "4", "7"],
        ["2", "5", "8"], 
        ["0", "4", "8"],
        ["2", "4", "6"]
      ]

    this.checkmatch(winLines)
  }

  checkmatch(winLines){
    let board = this.state.board;
    for (let index = 0; index < winLines.length; index++) {
      const [a,b,c]=winLines[index];
      if(board[a] && board[a] === board[b] && board[a] === board[c] ){
        alert('You won!');
        this.setState({
          winner : this.state.player
        })
        this.state.winner = this.state.player;
      }
    }
    if(!this.state.winner && !board.includes(null)){
      this.state.winner = 'None';
      alert('Its a Draw!');
    }
  }

  handleClick(index){

    //To render images on selecting ImageMode mode
    const images ={
      connery : require('./images/connery.svg'),
      square : require('./images/square.svg')
    }


    if(this.state.player && !this.state.winner && this.state.gamemode === "Classic"){

      let newBoard = this.state.board

      if(this.state.board[index]===null){

        newBoard[index] = this.state.player
        /* push the last index into the array */
        this.state.order_ndex.push(index) 
        this.setState({
          board: newBoard,
          player: this.state.player==="X" ? "O" : "X"
        })

        this.checkWinner()

      }
    }

    else{

      let newBoard = this.state.board

      if(this.state.board[index]===null){

        newBoard[index] = this.state.player
        /* push the last index into the array */
        this.state.order_ndex.push(index) 
        this.setState({
          board: newBoard,
          player: this.state.player=== images.connery ? images.square : images.connery
        })

        this.checkWinner()

      }

    }
  } 

  setPlayer(player){
    this.setState({player})

  }

  setGameMode(gamemode){
    console.log(gamemode)
    this.setState({gamemode})

  }

  renderBoxes(){
    return this.state.board.map(
      (box, index) => 
      <div className="box" key={index} 
        onClick={()=> {this.handleClick(index)}}>
        {box}
      </div>
    )
  }

  reset(){

    this.setState({
      board : Array(9).fill(null),
      player :  null,
      winner : null,
      gamemode : null,
      order_ndex : []

    })

  } 

  undo() {
    let ndex = this.state.order_ndex.pop() 
    let newBoard = this.state.board
    let prev = newBoard[ndex]
    newBoard[ndex] = null
    this.setState({
      board: newBoard,
      player: prev
    })
  }

  render() {


    return (

      <div className="container">
        <h1>Tic Tac Toe App</h1>

        <GameStatus 
          gamemode ={this.state.gamemode} 
          setGameMode = {(e)=> this.setGameMode(e)}
        />

        <Status
          player={this.state.player} 
          setPlayer={(e) => this.setPlayer(e)}
          winner = {this.state.winner}
        />

        <div className="board">

          {this.renderBoxes()}

        </div>
        <div className="btn">
          <button className='reset' onClick = {() => this.reset()}> Reset </button>
          <div className="divider"/>
          <button className='reset' disabled ={this.state.winner} onClick = {() => this.undo()}> Undo </button>
        </div>

      </div>

    );
  }
}

export default App;

ChooseGameMode.js

import React, { Component } from 'react';

class ChooseGameMode extends Component{

    handleForm(e){
        e.preventDefault();
        this.props.gamemode(e.target.gamemode.value);
    }

    render(){
        return (
            <form onSubmit={(e)=> this.handleForm(e)}>
                <label>
                    Classic
                    <input type="radio" name="gamemode" value="Classic"/>
                </label>

                <label>
                    Frontenddevlandia
                    <input type="radio" name="gamemode" value="Frontenddevlandia"/>
                </label>

                <input type="submit" value="Submit" />
            </form>
        )

    }
}

export default ChooseGameMode;

choosePlayer.js

import React, { Component } from 'react';

class Player extends Component{

    handleForm(e){
        e.preventDefault();
        this.props.player(e.target.player.value);
    }

    render(){
        return (
            <form onSubmit={(e)=> this.handleForm(e)}>
                <label>
                    Player X
                    <input type="radio" name="player" value="X"/>
                </label>

                <label>
                    Player O
                    <input type="radio" name="player" value="O"/>
                </label>

                <input type="submit" value="Start" />
            </form>
        )

    }
}

export default Player;

GameStatus.js

import React, { Component } from 'react';

import ChooseGameMode from'./ChooseGameMode';


class GameStatus extends Component {

    handleSetGameMode(e){
        this.props.setGameMode(e)
    }

    render(){

        return (this.props.gamemode ? 
              <h3>You are playing the {this.props.gamemode} mode</h3> : 
              <ChooseGameMode gamemode={(e) => this.handleSetGameMode(e)} />
        )
    }
}

export default GameStatus;

Status.js

import React, { Component } from 'react';

import Player from'./choosePlayer';

class Status extends Component {

    handleSetPlayer(e){
        this.props.setPlayer(e)
    }

    renderHtml(){
        if (this.props.winner){
            return (<h2>Winner is {this.props.winner}</h2>)
        } else {
            return this.props.player ? 
            <h2>Next player is {this.props.player}</h2> : 
            <Player player={(e) => this.handleSetPlayer(e)} />
        }
    }

    render(){

        return (<span>{this.renderHtml()}</span>)
    }
}

export default Status;

当我 select Image 模式并选择播放器而不是渲染图像时，它只是将图像文件的路径渲染到应用程序中。我使用 require('./images/connery.svg'), 来渲染图像。我可以知道我做错了什么吗，我还没有在这里使用 Redux 进行状态管理，因为我是学习 React 和 Redux 的新手，有人可以帮助我如何将 Redux 实现到这个现有的应用程序中，以便状态管理可以以更好的方式处理，而不是将状态作为不同组件的单独道具传递？关于如何实施这个以及任何其他改进或建议的一般想法也将非常有帮助。另外，正如建议的那样，这是我的 codesandbox link.

Answer 1

要使用图片，你不需要修改你的经典代码，你只需要在你的工作经典代码中更新 renderBoxes() 并删除你添加到其他部分的 Image 的条件代码例如 App.js handleClick().

const connery = require("./images/connery.svg"); // or import connery from "./images/connery.svg"
const square = require("./images/square.svg");

  ...
  
  renderBoxes() {
    
    const isFrontend = this.state.gamemode === 'Image'
  
    return this.state.board.map((box, index) => (
      <div
        className="box"
        key={index}
        onClick={() => {
          this.handleClick(index);
        }}
      >
        {box === "X" && isFrontend && <img src={connery} />}
        {box === "O" && isFrontend && <img src={square} />}
        {!isFrontEnd && box}
      </div>
    ));
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

为了让你的问题在下次 IMO 时不那么麻烦，你可以在 https://codesandbox.io/s 上托管你的代码，只在这里显示问题。

使用 reactjs 在 tic tac toe 应用程序中渲染图像

Render Images in tic tac toe app using reactjs

javascript

tic-tac-toe

reactjs

redux