web-dev-qa-db-ja.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() });
    }
}
javascriptreactjsecmascript-6
13
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.setState(this.initialState);
  }
}

または単に変数：

constructor(props) {
  super(props);

  this.initialState = {
    title: 'Testing',
    size: 100,
    color: '#4d96ce',
  };
  this.state = this.initialState;
}
17
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)
    }
}
4
wolverine ks

初期状態は特定のインスタンスに依存しないように見えるため、クラスの外部で値を定義するだけです。

const initialState = {...};

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

        this.state = initialState;
    }

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

高次コンポーネントを使用して、コンポーネントの状態をクリアします（レンダリング）

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