- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我是 React 的新手,正在开发 John Conway - Game of Life 应用程序。我为游戏板本身构建了一个 Gameboard.js
功能组件(它是 App.js
的子组件)和一个 Square.js
功能组件组件,代表棋盘中的单个方 block (是 Gameboard
的子项和 App
的孙项)。
在 App
中,我有一个名为 alive
的函数,我想在用户单击它时更改单个方 block 的颜色。 App
还有一个“alive”属性,其状态最初设置为 false,alive
会在调用时将该属性更改为 true。
这是App.js
:
import React, { Component } from 'react';
import './App.css';
import GameBoard from './GameBoard.js';
import Controls from './Controls.js';
class App extends Component {
constructor(props){
super(props);
this.state = {
boardHeight: 50,
boardWidth: 30,
iterations: 10,
reset: false,
alive: false
};
}
selectBoardSize = (width, height) => {
this.setState({
boardHeight: height,
boardWidth: width
});
}
onReset = () => {
}
alive = () => {
this.setState({ alive: !this.state.alive });
console.log('Alive function has been called');
}
render() {
return (
<div className="container">
<h1>Conway's Game of Life</h1>
<GameBoard
height={this.state.boardHeight}
width={this.state.boardWidth}
alive={this.alive}
/>
<Controls
selectBoardSize={this.selectBoardSize}
iterations={this.state.iterations}
onReset={this.onReset}
/>
</div>
);
}
}
export default App;
Gameboard
看起来像这样并将 props.alive 传递给 Square
:
import React, { Component } from 'react';
import Square from './Square.js';
const GameBoard = (props) => {
return (
<div>
<table className="game-board">
<tbody>
{Array(props.height).fill(1).map((el, i) => {
return (
<tr key={i}>
{Array(props.width).fill(1).map((el, j) => {
return (
<Square key={j} alive={props.alive}/>
);
})}
</tr>
);
})}
</tbody>
</table>
</div>
);
}
export default GameBoard;
在我的 CSS 中,我有一个名为 active 的类,如果单击它,它会更改单个方 block 的颜色。我怎样才能在 Square
中单击 td 元素时颜色发生变化(即 CSS 类变为事件状态)?
我已经试过了:
import React, { Component } from 'react';
const Square = (props) => {
return(
<td className={props.alive ? "active" : "inactive"} onClick={() => props.alive()}></td>
);
}
export default Square;
CSS 看起来像这样:
.Square {
background-color: #013243; //#24252a;
height: 12px;
width: 12px;
border: .1px solid rgba(236, 236, 236, .5);
overflow: none;
&:hover {
background-color: #48dbfb; //#00e640; //#2ecc71; //#39FF14;
}
}
.inactive {
background-color: #013243; //#24252a;
}
.active {
background-color: #48dbfb;
}
我怎样才能使 .Square CSS 类始终应用于每个正方形,但如果它处于事件状态,则单个正方形颜色会发生变化?换句话说,我能否将 Square
的 td 设置为始终使用 .Square CSS 类设置样式,然后 Square
中的各个元素可以根据是否适当着色alive
在 App
的状态下是真的吗?
是否有三元方法总是设置一个特定的 CSS 类,然后另外设置 2 个其他类中的 1 个....即Square CSS 类始终显示并根据逻辑/状态呈现事件或非事件?
最佳答案
评论有理有据
你可以使用 template literal并在其中嵌入三元条件:
return (
<td
className={`Square ${props.alive ? "active" : "inactive"}`}
onClick={() => props.alive()}
></td>
);
快速复习模板文字:使用反引号包裹字符串,您可以通过将其包裹在 ${}
模式中来在其中插入 JavaScript 表达式。作为奖励,模板文字可以跨越多行,因此不再有尴尬的字符串连接!
const myName = "Abraham Lincoln";
const myString = `Some text.
This text is on the next line but still in the literal.
Newlines are just fine.
Hello, my name is ${myName}.`;
编辑:我现在看到的更大问题是您没有在任何地方存储每个单元格的状态。您只有一个 bool 值存储在 App
中,称为 alive
...您真正需要的是 bool 值的数组,每个 bool 值代表单个 Square
的状态。
“事件”状态数组应该存在于 App
或 GameBoard
中,遵循 "the data flows down" 的 React 原则.在您的情况下,您可以尝试将其保留在 App
中,这样 GameBoard
和 Square
就可以保留纯功能组件。
在 App
中,您可以在构造函数中创建一个新的二维数组 board
,并用 0
的子数组填充它> 初始值:
// App.js
constructor(props){
super(props);
this.state = {
boardHeight: 50,
boardWidth: 30,
board: [],
iterations: 10,
reset: false,
};
this.state.board = new Array(this.state.boardHeight).fill(new Array(this.state.boardWidth).fill(0));
}
在board
数组中,每个索引代表一行。因此,[[0, 0, 1], [0, 1, 0], [1, 1, 1]]
的简化示例将表示:
0 0 1
0 1 0
1 1 1
GameBoard
应该完全基于传递给它的 board
属性渲染你的单元格网格,并传递每个 Square
它的事件值和回调用作 Prop :
const GameBoard = (props) => {
return (
<div>
<table className="game-board">
<tbody>
{this.props.board.map((row, y) => {
return <tr key={y}>
{row.map((ea, x) => {
return (
<Square
key={x}
x={x}
y={y}
isAlive={ea}
aliveCallback={this.props.alive}
/>
);
})}
</tr>;
})}
</tbody>
</table>
</div>
);
}
从那里您应该能够看到这个应用程序是如何工作的。 App
存储游戏状态并呈现功能组件 GameBoard
。 GameBoard
中,每个Square
根据其alive值进行渲染,点击时触发aliveCallback
。 aliveCallback
应该在 App
的 board
数组中根据其 x
和y
属性。
关于css - React - 使用三元在功能组件中应用 CSS 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52413319/
我想知道javascript中if的简码是什么? 就像在 PHP 中一样: $res = ($x > $y)? $x: $y; 它在 JavaScript 中的转换是什么? 最佳答案 在 javasc
请问为什么下面的代码会报错? 错误: numberOne > numberTwo ? return "true" : return "false"; ^
在我的代码中,我检查系统函数是否等于零,如果是我返回另一个值,如果不是,我返回测试值。 (class.verylongfunc(arg, arg) == 0) ? othervar : cla
在 PHP 中,有没有一种方法可以使用三元条件连接两个字符串? 当我尝试这样做时,我得到的只是 else 而不是所需的 something else。 最佳答案 像这样把整个三元运算符放在方括号中:
似乎在三元运算符中存在某种类型混淆。我知道这已在其他 SO 线程中得到解决,但它始终与可空值有关。另外,就我而言,我真的只是在寻找更好的方法。 我希望能够使用 proc.Parameters[PARA
有没有办法在不进行赋值或伪造赋值的情况下进行 java 三元运算? 我喜欢在执行一堆 if/then/else 时的简洁三元代码。 我希望能够基于 boolean 代数语句调用两个 void 函数之一
我正在使用 XSLT 和 XML 来生成输出文档。 我在数据中拥有的(以我无法控制的 XML 形式)如下: 4 我需要在计算中使用这些。我看到为这些提供默认值需要对文档执行转换以提供一个有点冗长的
这个问题已经有答案了: Ternary operators in JavaScript without an "else" (13 个回答) 已关闭 4 年前。 我一直使用这样的三元表达式,但我不喜欢
我在 VB.NET 中发现了一个可以轻松重现的简单错误: Dim pDate As Date? Dim pString As String = "" ' works fine as expected
所以,我有这段代码,它实际上有效: (散列将是这样的对象:{"bob"=> "12, "Roger"=> "15", etc},并且 isGood(key) 是调用函数 isGood ,如果玩家好或坏
是否有以下 JavaScript bool 三元表达式的简写语法: var foo = (expression) ? true : false 最佳答案 当然,您只想将表达式转换为 bool 值: v
在 Java 中,如果我在常规 if 中使用三元 if 运算符,例如: if ((x > y - z) ? true : callLongWaitedMethod(many, parameteres)
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 7 年前。 Improve
var test = "Hello World!"; 在 Java 10+ 中,上面的代码片段可以编译,test 在编译时被推断为 String。 但是,我们可以使用条件(三元)运算符来返回不同的类型
嗨,我尝试在渲染内部使用三元条件,但遇到一些错误,这是我的代码: render() { return ( (this.emai
这里我有以下 JavaScript 代码,带有两个值。 var w = $("#id1").val(); var h = $("#id2").val(); (w == h) ? (w=350 , h
我一直想知道如何用 C++ 兼容语言编写 "A ? B : C" 语法。 我认为它的工作方式类似于:(伪代码) If A > B C = A Else C = B 有没有经验丰富的 C++
考虑两个 vector ,A 和 B,大小为 n,7 <= n <= 23 . A 和B 都只包含-1、0 和1。 我需要一个计算A 和B 内积的快速算法。 到目前为止,我一直在考虑使用以下编码将
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
如果您一开始就讨厌三元条件运算符,则无需回复 ;) 我经常看到它与赋值表达式一起使用,例如: var foo = (some_condition) ? then_code : else_code; 但
我是一名优秀的程序员,十分优秀!