- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用reactjs创建一个简单的井字棋应用程序,其中有两种模式:经典和图像,在经典模式下我可以选择显示 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;
当我选择图像模式并选择播放器而不是渲染图像时,它只是将图像文件的路径渲染到应用程序中。我使用 require('./images/connery.svg'),
来渲染图像。我可以知道我做错了什么吗,我也没有在这里使用 Redux 进行状态管理,因为我是学习 React 和 Redux 的新手,有人可以帮助我如何将 Redux 实现到这个现有的应用程序中,以便状态可以以更好的方式处理管理,而不是将状态作为不同组件的单独 Prop 传递?关于如何实现这一点的总体想法以及任何其他改进或建议也将非常有帮助。另外,正如建议的,这是我的 codesandbox link .
最佳答案
要使用图像,您不需要修改经典代码,只需更新工作经典代码中的 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>
为了让你的问题下次在我看来不那么麻烦,你可以将你的代码托管在 https://codesandbox.io/s并仅在此处显示问题。
关于javascript - 使用reactjs在tic tac toe应用程序中渲染图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52826242/
我有一个包含数字和整数的文件,我只想读取整数, 如果它们令人讨厌,请忽略宏,但是我只需要有整数,但是我必须确保还要读取字符串,然后忽略它们 我必须在这里修改什么: #include #include
我有一个这样格式化的txt文件: MyDepartureTown MyDestinationTown 123.45 Vehicle 12 我正在尝试将数据导入到我的 C 程序中。这是我用来实现这一目标
我创建了一个简单的文件,使用 flex,它生成了一个文件 lex.yy.c,现在,我想把它放到 C++ 程序中。 %{ #include %} %% stop printf("Stop co
我的一个程序用 c++ 代码生成一个大文件。有没有办法从另一个C++类调用将生成的代码插入其中? 这是一个小例子,可以清楚地说明我想要实现的目标。 生成的文件示例: FirstClass first
我需要了解我的程序“检查输入十六进制消息的第三个位置” 程序将采用十六进制值输入消息。例如0x0123456789abcdef 程序将检查输入消息的第三个位置,即 0 现在程序将采用另一条十六进制值的
当我将输入从输入文件重定向到 yacc 程序时,在它完成解析文件后,我希望 yacc 解析器打印其所做操作的摘要。如果我通过键盘输入内容然后按 Ctrl+D,我希望它执行相同的操作。有办法做到这一点吗
我正在扫描该文件,但它有两种不同的结构。 文件: ParisRoubaix "Marco MARCATO" 33 UAD ITA 26 5:43:31 ParisRoubaix "Sam BEWLEY
我想将winsock2.lib 添加到我的程序中,但不希望将其包含到最终的可执行文件中。有什么方法可以让我动态加载与winsock2关联的dll吗?如果没有,是否有任何 dll(Windows 附带)
我尝试了一个基本程序来将数据从数据库表检索到java程序中。编译结束后,运行代码时出现异常。控制台中没有显示错误。显示异常消息 import java.sql.*; public class clas
我想用 C++ 创建一个跨平台安装程序。它可以是任何压缩类型,例如 zip 或 gzip,像普通安装程序一样嵌入程序本身。我不想在不同的平台、linux 和 windows 上创建很多更改。如何跨平台
每次尝试用鼠标输入两个顶点时,我都会崩溃。我最近改变了组织每个形状的方式,以确保新形状与旧形状重叠。 这个项目的想法是制作各种交互式 Canvas 。用户可以在直线、三角形和矩形之间进行选择,然后选择
我想在我的程序中显示以下文本。当我在 python 中粘贴以下文本时,它会将反斜杠解释为转义序列并弄乱我的 ascii 艺术..任何解决这个问题的想法极客。这是我的文本想出现在我的节目中 _ _
我正在尝试加载名为 Tut16_ReadText.txt 的文件,并使其运行程序以输出其重或轻。 我收到了粘贴在下面的错误。我无法抽出时间让这个程序运行。谁能解释一下我必须做什么才能使这个程序正常工作
我想使用命令行将列表作为参数传递,例如: $python example.py [1,2,3] [4,5,6] 我希望第一个列表 [1,2,3] 成为 first_list,[4,5,6] 成为 se
在分析 C# 应用程序时,我发现名为“ThePreStub”的系统 (?) 方法中有相当多的 CPU 使用率。这是什么? 最佳答案 参见:CLR Inside out - The Performanc
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
我正在用 Python 开发一个游戏,想知道如何给它自己的图标。我使用的是 Windows 计算机,没有安装 Python 的额外东西。哦,我也在使用 3.3 版,这甚至可能吗? P.S 我在 Sta
我正在使用 tkinter 使用 Python 开发一个项目,该项目将允许对 IP 地址进行地理定位。我有原始转换,我可以获取 IP 地址并知道城市、州、国家、经度、纬度等。我想知道是否有任何方法可以
我编写了一个程序,您可以在其中选择任意数字并将其与任意数字的幂相关联。代码运行正常,直到它到达某个部分,然后我必须输入一个字符以使其移动到代码的下一部分。这就是我的意思: #include int
我正在编写“HACKING Art Of Exploitation”一书练习 Convert2.c 第 61 页。 这是我的代码。下面是我的问题。 #include void usage(char
我是一名优秀的程序员,十分优秀!