it-roy-ru.com

Сбросить исходное состояние в React + ES6

У меня есть класс ElementBuilder ниже, и когда пользователь сохраняет созданное им Element, я хочу, чтобы состояние восстановилось до значений ниже.

У меня есть некоторые функции в этом классе, которые я не предоставил, но которые меняют состояние title, size и color.

В ES 5 у меня была бы функция getInitialState в моем классе, и я мог бы вызывать this.getInitialState() в функции.

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

Как мне добиться этого без написания функции, которая устанавливает объект значений по умолчанию (или, может быть, это ответ)? Спасибо!

class ElementBuilder extends Component {
    constructor(props) {
        super(props);

        this.state = {
            title: 'Testing,
            size: 100,
            color: '#4d96ce',
        };
    }

    resetBuilder() {
        this.setState({ this.getInitialState() });
    }
}
8
Zack Shapiro

Вы можете использовать функцию получения:

class ElementBuilder extends Component {
    constructor(props) {
        super(props);

        this.state = this.initialState;
    }

    get initialState() {
      return {
          title: 'Testing',
          size: 100,
          color: '#4d96ce',
      };
    }

    resetBuilder() {
        this.state(this.initialState);
    }
}

или просто переменная:

constructor(props) {
    super(props);

    this.initialState = {
        title: 'Testing',
        size: 100,
        color: '#4d96ce',
    };
    this.state = this.initialState;
}
12
quotesBro

Используя предложенные поля класса, вы можете сделать что-то вроде этого:

class ElementBuilder extends Component {
    static initialState = {
        title: 'Testing,
        size: 100,
        color: '#4d96ce'
    }

    constructor(props) {
        super(props)

        this.state = ElementBuilder.initialState
    }

    resetBuilder() {
        this.setState(ElementBuilder.initialState)
    }
}
2
wolverine ks

Поскольку начальное состояние не зависит от конкретного экземпляра, просто определите значение вне класса:

const initialState = {...};

class ElementBuilder extends Component {
    constructor(props) {
        super(props);

        this.state = initialState;
    }

    resetBuilder() {
        this.setState(initialState);
    }
}
1
Felix Kling

Используйте High Order Component, чтобы очистить состояние компонента (rerender)

Пример Element.jsx:

// Target ----- //

class Element extends Component {

  constructor(props){
    super(props)
    const {
        initState = {}
    } = props
    this.state = {initState}
  }

  render() {
    return (
        <div className="element-x">
            {...}
        </div>
    )
  }
}

// Target Manager ----- //

class ElementMgr extends Component {

    constructor(props){
        super(props)
        const {
            hash = 0
        } = props
        this.state = {
            hash, // hash is a post.id 
            load: false
        }
    }

    render() {
        const {load} = this.state
        if (load) {
            return (<div className="element-x"/>)
        } else {
            return (<Element {...this.props}/>)
        }
    }

    componentWillReceiveProps(nextProps) {
        const {hash = 0} = nextProps
        if (hash !== this.state.hash) {
            this.setState({load:true})
            setTimeout(() => this.setState({
                hash,
                load:false
            }),0)
        }
    }
}

export default ElementMgr
0
Charles Romney