Я относительно новичок в React и работаю над приложением John Conway - Game of Life. Я построил Gameboard.js функциональный компонент для самой платы (который является дочерним элементом App.js) и Square.js функциональный компонент, который представляет собой отдельный квадрат на доске (и является дочерним элементом Gameboard и внуком App).
В App у меня есть функция alive, которую я хочу изменить цвет отдельного квадрата, когда пользователь щелкает по нему. App также имеет свойство «жив» в состоянии, изначально заданном как 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, который меняет цвет отдельного квадрата, если по нему щелкнуть. Как я могу сделать так, чтобы в 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;
}
Как сделать так, чтобы класс CSS .Square ВСЕГДА применялся к каждому квадрату, но цвет отдельного квадрата менялся, если он активен? Другими словами, могу ли я установить для Square td всегда стиль с классом CSS .Square, а затем отдельные элементы внутри Square могут быть окрашены соответствующим образом в зависимости от того, истинно ли alive в состоянии App?
Есть ли тройной подход, чтобы всегда устанавливать один конкретный класс CSS, а затем, кроме того, устанавливать 1 из 2 других классов ... т.е. класс Square CSS всегда отображается, а активный или неактивный отображается в зависимости от логики / состояния?
