Путь обновления TypeScript React Hooks

У меня есть компонент TypeScript с некоторыми особенностями, я хотел бы перевести их в функциональный компонент и использовать новые хуки React.

У меня есть частные функции, использующие символы,

Конструктор и реквизит по умолчанию,

И простая функция рендеринга.

interface IProps {
  initialCount?: number;
}

interface IState {
  count: number;
}

const increment = Symbol();

class Counter extends React.Component {
  constructor(props)
    super(props);
    this.state = {
      count: props.initialCount!
    };
    this[increment] = this[increment].bind(this);
  }

  public static defaultProps = {
    initialCount: 0
  };

  [increment] = () => {
    const { count } = this.state;
    this.setState({ count: count + 1 });
  };
  render() {
    const { count } = this.state;
    return( <>
      <p>I've been clicked {count} times!</p>
      <button
        onClick = {this[increment]}>
        Click me
      </button>
    </>
  }
}

reactjs typescript

12.06.2019 13:20

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

166

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Несколько небольших советов:

Использовать реквизит по умолчанию намного проще, вы можете отказаться от него !

const Counter = ({ initialCount = 0 }: IProps) => //

Мы можем добавить useState и useEffect для управления вашим состоянием.

const Counter = () => {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
}

Ваша функция приватизирована с помощью замыканий, не нужно возиться с символами!

const Counter () => {
  const increment = () => setCount(count + 1); 
  return (<div/>)
}

Складываем все вместе и получаем:

import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import * as React from "react";
import "./style.css";

interface IProps {
  initialCount?: number;
}

const style: any = { backgroundColor: "blue" };

const Counter = ({ initialCount = 0 }: IProps) => {
  const [count, setCount] = React.useState(initialCount);
  React.useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const increment = () => setCount(count + 1);

  return (
    <div className = "byop-app__counter" style = {style}>
      <Typography variant = "h3">
        You clicked{" "}
        <span data-testid = "byop-app__counter-count-value">{count}</span> times
      </Typography>

      <Button
        className = "byop-app__counter-button"
        data-testid = "byop-app__counter-button"
        variant = "contained"
        color = "primary"
        onClick = {increment}>
        Click me
      </Button>
    </div>
  );
};

export default Counter;

12.06.2019 13:20

Другие вопросы по теме

Почему Partial принимает дополнительные свойства из другого типа?

Обратный вызов не редактирует значение

Вывод типа аргумента многомерного массива

Перебор n объектов с использованием ngFor recursivley

Советы по пузырьковым диаграммам Ngx

Проверка размеров изображения в Angular 7

Typescript: ограничение универсального типа на возвращаемое значение keyof

Предварительно выбранный список нескольких флажков в angular

Angular biding массив пользовательских объектов - имена свойств в верхнем/нижнем регистре из httpget

Angular2-date-picker - отображается только текущая дата-время

Путь обновления TypeScript React Hooks

Ответы 1

Другие вопросы по теме

Похожие вопросы