Реагировать на один экземпляр компонента

Question

У меня есть компонент счетчика, созданный этим пакетом npm.

import * as React from 'react';
import { Theme, createStyles, withStyles, WithStyles } from '@material-ui/core';
import withRoot from '../../../withRoot';
import Countdown, { CountdownRenderProps } from 'react-countdown-now/dist';

const styles = (theme: Theme) =>
  createStyles
  ({});

interface IProps
{}

interface IState
{
    seconds: number;
}

class Counter extends React.Component<IProps & WithStyles<typeof styles>, IState>
{
    constructor(props: IProps & WithStyles<typeof styles>)
    {
        super(props);

        this.state =
        {
            seconds: 60000
        }
    }

    // Random component
    Completionist = () => <span>Time is up!</span>;

    // Renderer callback with condition
    renderer = (props: CountdownRenderProps): JSX.Element =>
    {
        if (props.completed)
        {
            // Render a completed statep
            return this.Completionist();
        }
        else
        {
            // Render a countdown
            return <span>{props.minutes}:{props.seconds}</span>;
        }
    }

    render()
    {
        const css = this.props.classes;
        const seconds = this.state.seconds;

        const Body = () =>
            <Countdown date={Date.now() + seconds} renderer={ this.renderer } />

        return Body();
    }
}

export default withRoot(withStyles(styles)(Counter));

В моем проекте мне нужен этот счетчик на 4 разных страницах, следующих друг за другом, составалось время на новой странице.

Моя идея состояла в том, чтобы создать синглтон, но у меня не получилось.Любая помощь!Thnx

Answer 1

Есть два способа сделать это.Вы можете переместить состояние выше до корневого элемента и передать его вниз, используя реквизиты для ваших контрэлементов.Проблема с этим подходом состоит в том, что логика увеличения состояния должна быть в корневом элементе, иначе он будет увеличиваться больше в зависимости от того, сколько счетчиков у вас на экране.

Реакция нена самом деле означало быть полной структурой приложения, это действительно просто для рендеринга HTML.Если вы хотите правильно управлять состоянием приложения, вы должны использовать что-то вроде Redux, который очень хорошо взаимодействует с React и дает вам большую гибкость.Больше здесь: https://redux.js.org/introduction/getting-started