Блог

У меня есть компонент counter, созданный этим пакетом 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 amp; WithStyles<typeof styles>, IState>
{
    constructor(props: IProps amp; 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 разных страницах, которые следуют друг за другом, с оставшимся временем на новой странице.

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

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

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