Ответы пользователя по тегу JavaScript
  • Что делать с сообщениями в чате, которых уже не видно?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Здравствуйте.
    Самый простой способ реализации сообщений - через массив. Если ваш подход именно таков, то вы можете просто ограничить длинную массива, например при получении нового сообщения приложением, оно проверяет длину истории сообщений и удаляет лишние, в зависимости от метода добавления(array.splice()).

    Если же реализация выглядит иначе, то приложите код для ознакомления.
    Ответ написан
  • Как реализован данный функционал?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    https://developer.mozilla.org/ru/docs/Web/API/Canv...
    https://github.com/mdn/dom-examples/blob/master/ca...

    Тонкий намек на возможное решение.
    Самым сложным будет палитру прописывать + разлиновать исходник.
    На примере: верхняя сторона - красный цвет, левая - зеленый, правая - синий.
    У нас есть область замены - 3 штуки. Каждая из областей находит определенный цвет и заменяет его на цвет из палитры(тут главное в canvas API вникнуть, чтобы вернуть как было или два канваса, где верхний меняется, а нижний остается базовым).
    Ну, это если в общем расписывать, но, думаю, принцип понятен.
    Ответ написан
  • Как сохранить значения после перезагрузки?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    localStorage.setItem('ключ', JSON.stringify(что нужно сохранить))
      ...
      //onload
     const savedData = JSON.parse(localStorage.getItem('тот самый ключ'))

    https://developer.mozilla.org/ru/docs/Web/API/Wind...

    Либо, как уже предложили, сохранять в БД post/put запросом, и отправлять get при загрузке страницы.
    Ответ написан
    Комментировать
  • Как сделать зацикленную анимацию движения?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Добрый день.
    Могу ошибаться, но в вашем случае анимация работает только вверх, значит нужно ввести какие-то ограничения.
    Полагаю, стоит попробовать добавить условие, например
    if(vertical >= document.height){
      vertical++
    } else {
      vertical--
    }


    Таким образом элемент будет подниматься до высоты документа(играет роль позиционирование элемента. в вашем случае его позиционирование рассчитывается от bottom), и достигнув её, опускаться обратно.

    Второе, что не является ошибкой, но считается более верной практикой:
    меняйте не bottom в стиле, а transform: translateY('значение').

    Третье, как уже вам посоветовали, действительно гораздо проще зациклить анимацию в CSS.
    #ghost{
     position: absolute;
     bottom: 50px;
     animation: movement 10s linear infinite;
    
    @keyframes movement{
      50% {
        transform: translateY(100px)
      }
      100%{
        transform: translateY(0)
      }
    Ответ написан
    Комментировать
  • Как в React отменить перезагрузку страницы при клике на кнопку и при том же клике сразу вызвать другую функцию?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    const handleClick = (e) => {
     e.preventDefault();
    SpeechRecognition.startListening({ continuous: true, language: 'ru' })
    }
    
    onClick = { handleClick }
    Ответ написан
    Комментировать
  • Рендеринг массива с ограничением по длине и подстановкой "+хх more"?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Мне вот просто интересна критика своей версии, на истинность не претендую:
    через реф1 мы получаем ширину контейнера, затем вешаем рефы на каждый элемент массива, получаем их(елементов массива) ширину и индекс в массиве, складываем ширину элементов до ширины контейнера, остальные пeшим в новый массив, который развернется(если я правильно понял функционал) по клику +xxmore. Таким образом лишнего мы не рендерим, а в случае нужды - можем получить.
    Ответ написан
    Комментировать
  • Как правильно использовать useCallback в React?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    function Child ({data, sayHi}) {
    
      const handleClick = useCallback(el => {
        sayHi(el)
      }, [])
    
      return (
        <div className="App">
          {data.map(el=>
            <div
              onClick={()=>handleClick(el)}
            >
              {el}
            </div>
          )}
        </div>
      )
    }
    
    export default function App() {
      const data = [1,2,3,4]
      
      const sayHi = (el) => {
        console.log('Hi '+ el)
      } 
    
      return (
        <Child data={data} sayHi={sayHi} />
      )
    }


    Вы обманываете, тут нет ошибки в хуке.

    По-факту же ошибку вызывает doSomething( ), в которой, скорее всего, вызывается setState( ), который вызывает рендер и так далее до бесконечности, что не позволяет отрендерить.
    Ответ написан
  • Что здесь является this?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Я не очень понял твоё понимание("великий и могучий..."), но суть такова:
    (попытаюсь на пальцах, ибо сам в теории не силен)
    в пропсы компонента Square опускается не только вэлью(крестик или нолик), но и setState, обернутый в handleClick. То есть, таким образом, кликая по баттону в Square, фактически ты меняешь состояние компонента Board (

    handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
    squares: squares,
    xIsNext: !this.state.xIsNext,
    });
    (вот тут).

    А this. говорит реакту, что нужно передать handleClick из этого компонента.
    Ответ написан
    Комментировать