Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.06.2019, 13:44
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Как правильно передать props в React?
Всем привет. Разбираюсь с небольшой задачкой на React.js. В компоненте TimerComponent у меня есть метод handleStart. В нем уже описан механизи изменения state в функции setTimeout.
Но у меня:
this.props {
    currentInterval: undefined
}

Я не силен в React, подскажите, где потерялся этот props?
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';


const createStore = (reducer, initialState) => {
    let currentState = initialState;
    const listeners = [];

    const getState = () => currentState;

    const dispatch = action => {
        currentState = reducer(currentState, action);
        listeners.forEach(listener => listener())
    }

    const subscribe = listener => listeners.push(listener);

    return {getState, dispatch, subscribe}
}

const connect = (mapStateToProps, mapDispatchToProps) =>
    Component => {
        class WrappedComponent extends React.Component {
            render() {
                return (
                    <Component
                        {...this.props}
                        {...mapStateToProps(this.context.store.getState(), this.props)}
                        {...mapDispatchToProps(this.context.store.dispatch, this.props)}
                    />
                )
            }

            componentDidUpdate() {
                console.log('componentDidUpdate');
                this.context.store.subscribe(this.handleChange)
            }

            handleChange = () => {
                console.log('handleChange');
                this.forceUpdate()
            }
        }

        WrappedComponent.contextTypes = {
            store: PropTypes.object,
        }

        return WrappedComponent
    }

class Provider extends React.Component {
    getChildContext() {
        return {
            store: this.props.store,
        }
    }

    render() {
        return React.Children.only(this.props.children)
    }
}

Provider.childContextTypes = {
    store: PropTypes.object,
}

// APP

// actions
const CHANGE_INTERVAL = 'CHANGE_INTERVAL'

// action creators
const changeInterval = value => ({
    type: CHANGE_INTERVAL,
    payload: value,
})

// reducers
const reducer = (state, action) => {
    switch (action.type) {
        case CHANGE_INTERVAL:
            return state += action.payload

        default:
            return {}
    }
}

// components

class IntervalComponent extends React.Component {
    render() {

        console.log('class IntervalComponent this.state', this.state);
        console.log('class IntervalComponent this.props', this.props);

        return (
            <div>
                <span>Интервал обновления секундомера: {this.props.currentInterval} сек.</span>
                <span>
                  <button onClick={() => this.props.changeInterval(-1)}>-</button>
                  <button onClick={() => this.props.changeInterval(1)}>+</button>
                </span>
            </div>
        )
    }
}

const Interval = connect(dispatch => ({
        changeInterval: value => dispatch(changeInterval(value)),
    }),
    state => ({
        currentInterval: state,
    }))(IntervalComponent)

class TimerComponent extends React.Component {
    state = {
        currentTime: 0
    }

    handleStart = () => {

        console.log('this.state', this.state);
        console.log('this.props', this.props);

        setTimeout(() => this.setState({
            currentTime: this.state.currentTime + this.props.currentInterval,
        }), this.props.currentInterval)
    }

    handleStop = () => {
        console.log(this);
        this.setState({currentTime: 0})
    }

    render() {

        console.log('this.props', this.props);

        return (
            <div>
                <Interval/>
                <div>
                    Секундомер: {this.state.currentTime} сек.
                </div>
                <div>
                    <button onClick={this.handleStart}>Старт</button>
                    <button onClick={this.handleStop}>Стоп</button>
                </div>
            </div>
        )
    }
}

const Timer = connect(state => ({
    currentInterval: state,
}), () => {
})(TimerComponent)

// init
ReactDOM.render(
    <Provider store={createStore(reducer)}>
        <Timer />
    </Provider>,
    document.getElementById('app')
)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно реализовать следующую анимацию на React? gsdev99 Элементы интерфейса 0 23.03.2019 08:50
как правильно обращаться к свойствам объект внутри самого объекта ? mitiya Общие вопросы Javascript 12 25.04.2015 21:18
как правильно отслеживать вставку html() bombascter jQuery 15 20.11.2012 09:47
Как правильно прицепить обработку события slowklg Events/DOM/Window 6 15.03.2012 16:20
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14