Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 25.11.2019, 00:42
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от рони
наверняка этот код в целом можно сократить и написать рациональнее.
Да, можно функции в методе render можно объявить как методы и использовать состояние вместо того, чтобы искать элементы в DOM (как это всё время делают в jQuery). Меня вообще удивило то, что вы ищете элемент, когда вы можете поменять всё, что угодно, это ведь render!
Ответить с цитированием
  #12 (permalink)  
Старый 25.11.2019, 01:05
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Примерно так...
<html>
<head>
	<title></title>
	<style type="text/css">
		.cell{
			height: 50px;
			width: 50px;
			background-color: #FFFF00;
		}
		.game > div {
			width: 250px;
			display: flex;
			flex-wrap: wrap;
		}
	</style>
</head>
<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
    <script type="text/babel">

const { createElement, Component } = React;

class Game extends Component {
	state = {
		randomCell: null,
		greenCells: []
	}

	duel = Array.from(new Array(25), (_, i) => i);

	setGreen = () => {
		this.setState({
			randomCell: null,
			greenCells: this.state.greenCells.concat(this.state.randomCell)
		});
	};

	numRandom = () => {
		const randomCell = Math.floor(25 * Math.random());
		this.setState({ randomCell });
	};

	render() {
		const { randomCell, greenCells } = this.state;
		return <div className="game">
			<div>
				<button onClick={this.numRandom}>Play</button>
			</div>

			<div>{
				this.duel.map(i => {
					const style = {};
					if(greenCells.includes(i))
						style.backgroundColor = "green";
					if(randomCell === i)
						style.backgroundColor = "blue";
					return <div
						className="cell"
						style={style}
						onClick={randomCell === i ? this.setGreen : null}
					></div>
				})
			}</div>
		</div>
	}
}

ReactDOM.render(<Game />, document.getElementById("root"))

    </script>
</body>
</html>
Ответить с цитированием
  #13 (permalink)  
Старый 25.11.2019, 08:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Malleys
что угодно, это ведь render!
о великий, если б я знал короткую дорогу, известную тебе, а пока мне ваша фраза ни о чём не говорит, спасибо за пример, жаль не берёте в ученики.
Ответить с цитированием
  #14 (permalink)  
Старый 25.11.2019, 10:55
Аспирант
Отправить личное сообщение для djekokma Посмотреть профиль Найти все сообщения от djekokma
 
Регистрация: 09.10.2018
Сообщений: 36

Спасибо
Ответить с цитированием
  #15 (permalink)  
Старый 25.11.2019, 10:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

react игрушка продолжение

сделай поле зелёным!

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .cell{
            height: 50px;
            width: 50px;
            background-color: #FFFF00;
        }
        .game > div {
            width: 250px;
            display: flex;
            flex-wrap: wrap;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
    <script type="text/babel">

const { createElement, Component } = React;

class Game extends Component {
    state = {
        randomCell: null,
        greenCells: new Set()
    }

    duel = Array.from(new Array(25), (_, i) => i);

    setGreen = () => {
        this.setState({
            randomCell: null,
            greenCells: this.state.greenCells.add(this.state.randomCell)
        });

    };

    numRandom = () => {
        const {greenCells} = this.state;
        const freeCell = this.duel.filter(i => !greenCells.has(i))
        const randomCell = freeCell[Math.floor(freeCell.length * Math.random())];
        this.setState({ randomCell });
        clearTimeout(this.timer);
        this.timer = setTimeout(this.numRandom, 1000);
    };

    render() {
        const { randomCell, greenCells } = this.state;
        if(greenCells.size == this.duel.length) return <h1>Game over</h1>;
        return <div className="game">
            <div>
                <button onClick={this.numRandom}>Play</button>
            </div>

            <div>{
                this.duel.map(i => {
                    const style = {};
                    if(greenCells.has(i))
                        style.backgroundColor = "green";
                    if(randomCell === i)
                        style.backgroundColor = "blue";
                    return <div
                        className="cell"
                        style={style}
                        onClick={randomCell === i ? this.setGreen : null}
                    ></div>
                })
            }</div>
        </div>
    }
}

ReactDOM.render(<Game />, document.getElementById("root"))

    </script>
</body>
</html>

Последний раз редактировалось рони, 25.11.2019 в 11:19.
Ответить с цитированием
  #16 (permalink)  
Старый 25.11.2019, 11:42
Аспирант
Отправить личное сообщение для djekokma Посмотреть профиль Найти все сообщения от djekokma
 
Регистрация: 09.10.2018
Сообщений: 36

Шикарно. Спасибо Вам, великие Профессора.
Ответить с цитированием
  #17 (permalink)  
Старый 25.11.2019, 13:28
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

import React from 'react'
import './App.css'

const CELL_COUNT = 25

function App() {
  const [cells] = React.useState(Array.from({ length: CELL_COUNT }, (_, i) => i))
  const [randomCell, setRandomCell] = React.useState(null)
  const playClick = () => setRandomCell(parseInt(Math.random() * CELL_COUNT))
  const greenClick = () => setRandomCell(null)

  return (
    <div className="game">
      <div>
        <button onClick={playClick}>Play</button>
      </div>
      <div>
        {cells.map((cell, idx) => <button
          key={cell}
          className={idx === randomCell ? 'cell random' : 'cell'}
          onClick={randomCell && greenClick}
        >{cell}</button>)}
      </div>
    </div>
  )
}

export default App
Ответить с цитированием
  #18 (permalink)  
Старый 26.11.2019, 09:44
Аспирант
Отправить личное сообщение для djekokma Посмотреть профиль Найти все сообщения от djekokma
 
Регистрация: 09.10.2018
Сообщений: 36

SuperZen,
Спасибо большущее
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно отрендерить данные на react с разрывом? s24344 Элементы интерфейса 0 28.01.2019 19:35
виджет комментариев переделать с react на redux melnikov24 Node.JS 1 17.01.2019 12:51
node.js + react не принимает пост запрос korih Node.JS 0 15.04.2018 17:52
React + Redux не обновляется компонент при изменение store smegol Библиотеки/Тулкиты/Фреймворки 2 15.11.2017 15:07
Ищу Senior Frontend (React, Angular), Москва, 140 - 180 000 gross, full time офис. Ekaterina Polyakova Работа 0 11.08.2016 19:07