В этом задании вы самостоятельно подключите внешний сервис к небольшому приложению на React. Изначально в задаче есть: Внешний сервис, который представлен классом CounterService . Он содержи

Вопрос пользователя:

В этом задании вы самостоятельно подключите внешний сервис к небольшому приложению на React. Изначально в задаче есть: Внешний сервис, который представлен классом CounterService . Он содержит методы: getCounter — получить текущее значение счетчика; increment — увеличить счетчик на 1; decrement — уменьшить счетчик на 1; double — умножить счетчик на 2; divide — разделить счетчик на 2; Компонент App , в котором лежит верстка интерфейса для работы с счетчиком. Вам нужно подключить сервис CounterService к компоненту App. Для этого необходимо: Создать папку hooks, а в ней файл useCounter.ts. В файле useCounter.ts создать одноименный хук. В нём необходимо создавать экземпляр класса CounterService. Хук должен хранить состояние с значением счетчика и предоставлять набор функций для работы с методами экземпляра CounterService. Значение счетчика нужно отображать в компоненте App. На все кнопки также необходимо повесить функции с вызовом соответствующего метода. export interface Counter { getCounter: () => number increment: () => void decrement: () => void double: () => void divide: () => void } export class CounterService implements Counter { private counter: number = 1; public getCounter(): number { return this.counter; } public increment(): void { this.counter += 1; } public decrement(): void { this.counter -= 1; } public double(): void { this.counter *= 2; } public divide(): void { this.counter /= 2; } } import './styles.css'; export const App = () => { return ( <> <div className='counter'>Значение счетчика: (тут пока ничего нет)</div> <div> <button className='counter-button'> Прибавить 1 </button> <button className='counter-button'> Вычесть 1 </button> <button className='counter-button'> Умножить на 2 </button> <button className='counter-button'> Разделить на 2 </button> </div> </> ) }; Чтобы сохранить созданный экземпляр класса, можно воспользоваться хуком useRef. Значение счетчика можно хранить в состоянии при помощи useState и изменять его в теле каждой функции, в которой вызывается соответствующий метод класса CounterService.

Ответ нейросети:

Пройдите быструю авторизацию для просмотра:

// hooks/useCounter.ts import { useState, useRef } from 'react'; import { CounterService, Counter } from '../CounterService';

const useCounter = (): Counter => { const counterService = useRef(new CounterService()); const [counter, setCounter] = useState<number>(counterService.current.getCounter());

const increment = () => {
    counterService.current.increment();
    setCounter(counterService.current.getCounter());
};

const decrement = () => {
    counterService.current.decrement();
    setCounter(counterService.current.getCounter());
};

const double = () => {
    counterService.current.double();
    setCounter(counterService.current.getCounter());
};

const divide = () => {
    counterService.current.divide();
    setCounter(counterService.current.getCounter());
};

return {
    getCounter: () => counter,
    increment,
    decrement,
    double,
    divide,
};

};

export default useCounter;

// App.tsx import React from 'react'; import useCounter from './hooks/useCounter'; import './styles.css';

export const App = () => { const { getCounter, increment, decrement, double, divide } = useCounter();

return (
    <>
        <div className='counter'>Значение счетчика: {getCounter()}</div>
        <div>
            <button className='counter-button' onClick={increment}>
                Прибавить 1
            </button>
            <button className='counter-button' onClick={decrement}>
                Вычесть 1
            </button>
            <button className='counter-button' onClick={double}>
                Умножить на 2
            </button>
            <button className='counter-button' onClick={divide}>
                Разделить на 2
            </button>
        </div>
    </>
);

};

Напишите нам, если в вопросе есть ваши персональные данные (yasnoponyatno24@yandex.ru)

return ( <> <div className='counter'>Значение счетчика: {getCounter()}</div> <div> <button className='counter-button' onClick={increment}> Прибавить 1 </button> <button className='counter-button' onClick={decrement}> Вычесть 1 </button> <button className='counter-button' onClick={double}> Умножить на 2 </button> <button className='counter-button' onClick={divide}> Разделить на 2 </button> </div> </> );

ЯсноПонятно24

Пройдите быструю авторизацию для просмотра:

Пройдите быструю авторизацию для просмотра:

Последние вопросы: