क्या ईएस 6 कक्षाओं का उपयोग प्रारंभिक स्थिति में प्रतिक्रिया घटक को रीसेट करने का कोई तरीका है?

Question

मैं एक गेम लिख रहा हूं और जब खेल खत्म हो गया है, तो मैं इसे प्रारंभिक स्थिति में रीसेट करना चाहता हूं। मुझे इसके लिए दस्तावेज़ों में कोई सार्थक जानकारी नहीं मिली है, इसलिए मैं अपने गेम क्लास में रीसेट विधि जोड़ने के साथ खेल रहा हूं। सबसे पहले, मैं एक आधार वर्ग मैं बाद में विस्तार कर सकता बनाने, लेकिन घटक नाम के लिए एक चर का उपयोग कर की उम्मीद में पालन कर रही प्रयास विफल रहता है:

class Game extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     ... 
    }; 
    } 

    reset() { 
    var node = ReactDOM.findDOMNode(this), 
     ComponentName = this.constructor.name; 
    if (node) { 
     ReactDOM.unmountComponentAtNode(node); 
     ReactDOM.render(<ComponentName />, node); 
    } 
    } 

    ... 
} 

मैं पर चले गए, और इस प्रकार घटक नाम हार्डकोड करने की कोशिश की:

class Game extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     ... 
    }; 
    } 

    reset() { 
    var node = ReactDOM.findDOMNode(this); 
    if (node) { 
     ReactDOM.unmountComponentAtNode(node); 
     ReactDOM.render(<Game />, node); 
    } 
    } 

    ... 
} 

यह वास्तव में अच्छी तरह से काम करता है, लेकिन अगर वहाँ एक अंतर्निहित तरीका है कि बेहतर है, या एक अधिक सामान्य तरीके से मैं सोच रहा हूँ।

Answer 1

अद्यतन कृपया पिछले उत्तर की उपेक्षा करें, प्रतिस्थापन स्थिर रूप से ES2015 वर्ग पैटर्न में उपलब्ध नहीं है। वैसे भी, एक और समाधान एक रैपर घटक के राज्य में खेल का एक उदाहरण रखना है।

कार्य बेला: https://jsfiddle.net/dannyjolie/upktozt1/1/

जब आप एक नया खेल के लिए रीसेट यह सिर्फ एप्लिकेशन की राज्य से वर्ष खेल निकाल दिया जाएगा और एक नया खेल अपनी जगह ले जाएगा।

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.newGame = this.newGame.bind(this); 
    this.state = { 
     game:()=><Game /> 
    }; 
    } 

    newGame() { 
    this.setState({ 
     game:() => <Game /> 
    }); 
    } 

    render() { 
    const ActiveGame = this.state.game; 
    return (
     <div> 
     <ActiveGame /> 
     <button onClick={this.newGame}>RESET GAME</button> 
     </div> 
    ); 
    } 
} 

class Game extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     foo: 'Bar' 
    }; 
    this.onButtonClick = this.onButtonClick.bind(this); 
    } 

    onButtonClick() { 
    this.setState({ 
     somethingElse: 'Hello', 
     foo: 'Changed foo' 
    }); 
    } 

    render() { 
    return (
     <div> 
     <button onClick={this.onButtonClick}>Set state.somethingElse</button> 
     <p>state.foo: {this.state.foo}</p> 
     <p>state.somethingElse: {this.state.somethingElse || '(not defined yet)'}</p> 
     </div> 
    ); 
    } 
} 

Answer 2

आप केवल state रीसेट की जरूरत है तो आप कुछ काम या चर में डिफ़ॉल्ट स्थिति स्थानांतरित कर सकते हैं और जब आप स्थिति को रीसेट की जरूरत केवल इस समारोह या चर से मूल्य के साथ setState को कॉल करते हैं।

उदाहरण:

class Game extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = this.getState(); // set state from getState result 
     this.onButtonClick = this.onButtonClick.bind(this); 
     this.onReset = this.onReset.bind(this); 
    } 

    getState() { 
     return { 
      number: 0 
     } 
    } 

    onReset() { 
     this.setState(this.getState()) // set state from getState result 
    } 

    onButtonClick() { 
     this.setState({ 
      number: this.state.number + 1 
     }); 
    } 

    render() { 
     return (
      <div> 
       <button onClick={this.onButtonClick}> 
        Increment 
       </button> 
       <p>{this.state.number}</p> 

       <button onClick={this.onReset}> 
        Reset 
       </button> 
      </div> 
     ); 
    } 
} 

Example on JSFiddle

Answer 3

मैं सिर्फ setState का उपयोग करने और राज्य के स्वयं के गुण से अधिक पुनरावृत्ति, उन्हें undefined, जो मेरे लिए अच्छी तरह से काम कर रहा है के लिए सेटिंग इस समस्या का एक समाधान आवेदन किया है:

class Example extends React.Component 
{ 
    constructor(props){ 
     super(props); 
     this._handleInputChange = this._handleInputChange.bind(this); 
     this._submitHandler = this._submitHandler.bind(this); 
     this._resetHandler = this._resetHandler.bind(this); 
     this._setInitialState = this._setInitialState.bind(this); 
     this.state = this._setInitialState(); 
    } 
    _resetHandler(){ 
     this.setState((prevState, props) => { 
      var newState = {}; 
      for(var key in prevState) { 
       if (prevState.hasOwnProperty(key)) { 
        newState[key] = undefined; 
       } 
      } 
      if(typeof this._setInitialState === 'function'){ 
       Object.assign(newState, this._setInitialState()); 
      } 
      return newState; 
     }); 
    } 

    _setInitialState(){ 
      return { 
       mode: 'advanced', 
       created: {}, 
       changed: {} 
      }; 
    } 

    _handleInputChange(){ 
     // do stuff to change the state 
    } 
} 

जहां _setInitialState रिटर्न जो कुछ गुण की जरूरत एप्लिकेशन काम करने के लिए प्रारंभ किया जाना है।

यह प्रारंभिक वस्तु में आपके राज्य की पूर्ण रूपरेखा को बनाए रखने की आवश्यकता के फायदे को जोड़ता है, जबकि रीसेट पर घटक को फिर से घुमाने के ऊपरी हिस्से की आवश्यकता नहीं होती है।