React: ES6 वर्ग सिंटैक्स में डिफ़ॉल्ट प्रॉप्स

जब कंपोनेंटWillReceiveProps कहा जाता है, तो डिफ़ॉल्ट प्रॉप्स को पहले ही मर्ज कर दिया जाना चाहिए।

जब कंपोनेंटWillReceiveProps कहा जाता है, तो डिफ़ॉल्ट प्रॉप्स को पहले ही मर्ज कर दिया जाना चाहिए।

जहां तक ​​​​मैं कह सकता हूं, ES6 क्लास सिंटैक्स का उपयोग करते समय getDefaultProps को कभी भी कॉल नहीं किया जाता है।

यह सही है। इसके बजाय, आप इसे लिखते हैं:

class Control extends React.Component {

  // ...

  componentWillReceiveProps(props) {
    // Do something with props...
  }

}
Control.defaultProps = {value: ''};

क्या यह आपके लिए कारगर है?

आह, क्षमा करें, मैं अब दस्तावेज़ीकरण में देखता हूं। धन्यवाद!

क्योंकि मैं यहां एक Google खोज से आया हूं, और मैं अपने कोड को एनकैप्सुलेट करने के लिए class पसंद करता हूं, इसलिए गणना की गई संपत्तियों का उपयोग करके डिफ़ॉल्ट प्रॉप्स सेट किया जा सकता है:

import React, {Component, PropTypes} from 'react'
class DefaultPropsExample extends Component {
  static defaultProps = {
    ...Component.defaultProps,
    instructions: 'Usage instructions not provided.',
  }
}

@jhabdas आपने जो दिया है वह ES2015 सिंटैक्स नहीं है, मुझे लगता है; अगर मैं स्टैटिक प्रॉप्स का उपयोग करता हूं, तो बैबेल अप्रत्याशित टोकन फेंकता है, हालांकि, उन लोगों के लिए जो मेरे जैसे es2015 में काम करते हैं, यहां एक काम करने वाला सामान है।

import React from 'react';
export default class extends React.Component {

  static get defaultProps() {
    return {
      // stuff you want :)
    }
  }

}

अपडेट करें

@zpao के लिंक को स्थापित करने के बाद मैं स्थिर गुणों का उपयोग कर सकता हूं ...

@ गोपीकृष्ण19 आपको एक और http://babeljs.io/docs/plugins/transform-class-properties/

@zpao ओह! आज एक और नया सामान :) कोशिश करेंगे कि, बहुत बहुत धन्यवाद!

@ गोपीकृष्ण 19 मुझे वास्तव में आपके द्वारा पोस्ट किया गया कोड स्निपेट पसंद है b/c मैं डिफ़ॉल्ट प्रॉप्स को इनिशियलाइज़ करने से पहले कुछ प्री-प्रोसेसिंग कर सकता हूं। इसका उल्लेख करने के लिए धन्यवाद।

ऐसा लगता है कि यह काम कर रहा है और यह मेरी राय में और अधिक सुरुचिपूर्ण है:

....

 static defaultProps = {
      //someDefaultProps
  };

  constructor(props, defaultProps) {
    super(props, defaultProps);
  }

....

@fxhereng दूसरा तर्क context लिए आरक्षित है, इसलिए मैं इसे कुछ कस्टम अर्थों के साथ ओवरराइड करने से बचूंगा क्योंकि यह भविष्य के रिलीज में टूट सकता है।

ठीक है @gaearon आपके लिए डिफ़ॉल्ट प्रॉप्स सेट करने का सबसे अच्छा तरीका क्या है?

धन्यवाद,

इसका अनुशंसित तरीका क्या है?

यदि आप प्रयोगात्मक रूपांतरण http://babeljs.io/docs/plugins/transform-class-properties/ का उपयोग करते हैं, तो आप केवल static defaultProps = {...}; उपयोग कर सकते हैं। कंस्ट्रक्टर में बदलाव की जरूरत नहीं है। अन्यथा, आपको बाहर असाइन करने की आवश्यकता है:

class X extends React.Component {
}
X.defaultProps = {...};

भी..

class X extends React.Component {
  props = {
    ...
  }
}

@efernandesng यह समर्थित पैटर्न नहीं है। यह defaultProps तरह व्यवहार नहीं करेगा और यह this.props जो आपको नहीं करना चाहिए।

ऐसा लगता है कि मुझे डिफॉल्टप्रॉप्स को पैरेंट क्लास के साथ इंस्टेंट करने के लिए नहीं मिल सकता है ताकि मैं उन प्रॉप्स को दूसरे चाइल्ड क्लास में पास कर सकूं।

क्या ऐसा करने का कोई मानक es6 तरीका है? यहां पर सभी विधियां मेरे लिए काम नहीं करती हैं।

ऐसा लगता है कि मुझे डिफॉल्टप्रॉप्स को पैरेंट क्लास के साथ इंस्टेंट करने के लिए नहीं मिल सकता है ताकि मैं उन प्रॉप्स को दूसरे चाइल्ड क्लास में पास कर सकूं।

मुझे समझ नहीं आ रहा है कि आपका क्या मतलब है। क्या आप एक उदाहरण दिखा सकते हैं?

बेशक, इसके लिए खेद है।

यहाँ एक घटक है:

import React, 
{
  Component,
  PropTypes
}                     from 'react';
import { TimerView }  from './TimerView'

class Timer extends Component {
  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(props) {
    console.log('Will receive props')
  }

  render() {
    console.log("Timer loaded")

    return (
      <TimerView {...props} />
    )
  }
}

Timer.propTypes = {
  status: PropTypes.string.isRequired,
};

Timer.defaultProps = {
  status: "This is the Timer",
};

export default Timer;

जब मैं वेबपैक-देव-सर्वर चलाता हूं, तो मुझे यह त्रुटि मिलती है:
Uncaught ReferenceError: props is not defined

कुछ ऐसा होना चाहिए जो मैं गलत कर रहा हूँ...

props आपके render() पद्धति में एक अनबाउंड वैरिएबल है। यह <TimerView {...this.props} /> होना चाहिए।

अरे मेरा।
मैं इसे पूरी तरह से चूक गया। मुझे लगता है कि चूंकि मैं कक्षाओं के रूप में स्टेटलेस घटकों का उपयोग कर रहा हूं, इसलिए मैं बस इस पर भ्रमित हो गया।

धन्यवाद महोदय।

कोई बात नहीं @jeanmichelcote! ऐसा होता है :)

डिफॉल्टप्रॉप्स को परिभाषित करने के लिए अन्य प्रॉप्स को एक्सेस करना एक एंटी-पैटर्न माना जाता है?

class Comp extends from React.Component {
  static propTypes: {
    num: React.PropTypes.number.isRequired,
    action: React.PropTypes.func,
  };

  static defaultProps: {
    action: () => console.log(this.props.num), // "this" is invalid in static context
  };

  render() {
    return (
      <button onClick={this.props.action}>
        {`Log #${this.props.num}`}
      </button>
    );
  }
}

@romulof ऐसा लगता है कि आप एक स्थिर विधि से एक आवृत्ति चर को संदर्भित करने का प्रयास कर रहे हैं। आप ऐसा नहीं कर सकते क्योंकि यह बताने का कोई तरीका नहीं है कि आप किस this बारे में बात कर रहे हैं। परिभाषा के अनुसार, स्थिर चीजें हमेशा एक उदाहरण के संदर्भ से बाहर रहती हैं।

@romulof यह सभी वस्तु उन्मुख भाषाओं के साथ आम है। वसा तीर सिंटैक्स उस संदर्भ से जुड़ता है जिसमें इसे परिभाषित किया गया है। हो सकता है कि आप इसका उपयोग करने का प्रयास कर सकें

static defaultProps: {
    action: function() {
        console.log(this.props.num), // "this" depends on the context where it is run
    }
};

@sbussard : बिल्कुल।

मेरा प्रश्न लगभग defaultProps एक स्थिर वस्तु के रूप में लागू किया जा रहा है।
हो सकता है कि इसे एक फ़ंक्शन होने की अनुमति दी जाए, जिसे कंस्ट्रक्टर द्वारा बुलाया जाए।

यह जानबूझकर कक्षा के बाहर है ताकि एक अनुकूलन संकलक इसे कॉल साइट पर इनलाइन कर सके।

तो अंतिम उत्तर क्या है?

@gaearon आपने इसका उल्लेख किया है

यह जानबूझकर कक्षा के बाहर है ताकि एक अनुकूलन संकलक इसे कॉल साइट पर इनलाइन कर सके।

लेकिन क्या इसका मतलब यह है कि "क्लास इंस्टेंस फ़ील्ड्स" और/या "क्लास स्टैटिक फ़ील्ड्स" का उपयोग करते समय इसे ऑप्टिमाइज़ नहीं किया जा सकता है? मुझे लगता है कि मैं यह समझने की कोशिश कर रहा हूं कि कौन सा दृष्टिकोण पसंद किया जाता है और क्यों।

तो अंतिम उत्तर क्या है?

यदि आप ES6 से चिपके रहना चाहते हैं, तो इसे नीचे असाइन करें:

class MyComponent extends Component { /* ... */ }
MyComponent.defaultProps = { /* ... */ };

यदि आप क्रिएट रिएक्ट ऐप का उपयोग कर रहे हैं, या यदि आप प्रयोगात्मक सिंटैक्स के साथ सहज हैं और वर्ग गुणों को बदलने में सक्षम हैं, तो आप यह कर सकते हैं:

class MyComponent extends Component {
  static defaultProps = { /* ... */ };
  /* ... */
}

ये दृष्टिकोण पूरी तरह से समकक्ष हैं। ध्यान दें कि यदि आप सज्जाकारों का भी उपयोग कर रहे हैं, तो आपके पास इन परिवर्तनों के संयोजन में अजीब बग हो सकते हैं। इसलिए मैं वर्ग गुणों के साथ सज्जाकारों का उपयोग करने की अनुशंसा नहीं करता।

आशा है यह मदद करेगा!

लेकिन क्या इसका मतलब यह है कि "क्लास इंस्टेंस फ़ील्ड्स" और/या "क्लास स्टैटिक फ़ील्ड्स" का उपयोग करते समय इसे ऑप्टिमाइज़ नहीं किया जा सकता है? मुझे लगता है कि मैं यह समझने की कोशिश कर रहा हूं कि कौन सा दृष्टिकोण पसंद किया जाता है और क्यों।

अंत में असाइन करने और वर्ग गुणों का उपयोग करने में कोई अंतर नहीं है। असाइनमेंट के लिए वर्ग गुण desugar। कृपया Babel वेबसाइट पर REPL का उपयोग करके देखें कि कौन सा कोड कंपाइल करता है।

मैं उसी मुद्दे के बारे में उत्सुक हूं जिसके बारे में @romulof वार्ता करता है। निश्चित रूप से, मैं डिफ़ॉल्ट गुणों को परिभाषित करने के लिए static defaultProps का उपयोग कर सकता हूं लेकिन अगर मैं संदर्भ का उपयोग करना चाहता हूं तो क्या होगा?

यह उपयोगी क्यों है?

मेरे पास एक सामान्य मोडल घटक है जिसमें title और onSubmit सहारा है। कभी-कभी मैं एक ही प्रोप के साथ मॉडल का उपयोग करना चाहता हूं लेकिन मेरे ऐप के पूरी तरह से अलग हिस्सों से। title यह ठीक काम करता है।

class CreateUserModal extends Modal {
  static defaultProps = { title: 'Create a new user' }
}

हालांकि onSubmit हैंडलर, जो कोड का एक अच्छा हिस्सा होता है, को संदर्भ की आवश्यकता होती है क्योंकि यह रेडक्स को जोड़ने से पॉप्युलेट किए गए प्रोप का उपयोग करता है। वर्तमान में मेरे लिए इस कोड को अमूर्त करने का कोई तरीका नहीं है क्योंकि संदर्भ का उपयोग मूल वर्ग के प्रॉप्स को सेट करने के लिए नहीं किया जा सकता है।

मैं जो करने की कोशिश कर रहा हूं वह वास्तव में एक विरोधी पैटर्न नहीं है (या कम से कम मुझे लगता है कि यह नहीं है) इसलिए मुझे आश्चर्य है कि ऐसा करने का कोई और तरीका है या नहीं?

मुझे उम्मीद थी कि मैं कुछ ऐसा कर पाऊंगा

class CreateUserModal extends Modal {
  constructor (props) {
    super({
      title: 'Create a new user',
      onSubmit: () => {
        // do a load of stuff using props
      }
    })
  }
}

लेकिन यह काम नहीं करता।

@roberttod क्या आपको अपनी समस्या का समाधान मिला? धन्यवाद

मैं एक अनुवर्ती प्रश्न पूछना चाहता हूं,
अगर मैं क्रिएट रिएक्ट ऐप (रिएक्शन-स्क्रिप्ट v1.0.12) का उपयोग कर रहा हूं, तो क्या प्रारंभिक अवस्थाओं को परिभाषित करना ठीक है?

class Foo extends Component {
  static defaultProps = {};

  static propTypes = {};

  state = {...};
}

प्रारंभिक अवस्थाओं को परिभाषित करने के लिए कंस्ट्रक्टर्स का उपयोग करने की तुलना में क्या अंतर है:

class Foo extends Component {
  static defaultProps = {};

  static propTypes = {};

  constructor(props) {
    super(props);

    this.state = {...};
  }
}

विशेष रूप से पहले दृष्टिकोण में कोई प्रदर्शन प्रभाव है?

बात बिल्कुल वैसी ही है, कोई फर्क नहीं है।

@jhabdas ठीक है, इसलिए जब डिफ़ॉल्टप्रॉप्स को इस प्रकार परिभाषित किया जाता है:

static defaultProps = {
}

कक्षा विधियों से इसे कैसे एक्सेस करें:

this.defaultProps

undefined लौटाता है

@majioa मैं उस वर्ग-स्तरीय एपीआई के बारे में नहीं जानता, लेकिन एक विचार डिफ़ॉल्ट प्रोप को एक अलग ऑब्जेक्ट के रूप में कैश करना और उसका संदर्भ देना है। तुम क्या सोचते हो?

@majioa

class Foo extends React.Component {
  static defaultProps = { param: 1 };
  render() {
    return Foo.defaultProps.param;
  }
}

मैं एक ही समस्या को पूरा करता हूं, आपको बेबेल -प्लगइन-ट्रांसफॉर्म-क्लास-गुण स्थापित करना चाहिए

npm install -D babel-plugin-transform-class-properties

फिर "transform-class-properties" को .babelrc . में जोड़ें

{
  "presets": ["env", "react"],
  "plugins": ["react-hot-loader/babel", "transform-class-properties"]
}

स्टेटिक डिफॉल्टप्रॉप्स प्राप्त करें () {
वापसी {
कार: "मर्सिडीज"
}

@ आर्म 7107 यह अक्षम है क्योंकि यह हर बार एक तत्व इसका उपयोग

MyComponent.defaultProps = {
  // ...
}

या प्रयोगात्मक स्थिर वर्ग गुण वाक्य रचना का उपयोग करें:

class MyComponent extends React.Component {
  static defaultProps = {
    // ...
  };

  // ...
}

(जिसके लिए आपको एक Babel प्लगइन की आवश्यकता होगी)

Google परिणामों में दिखाई देने वाले और गलत सुझावों को रोकने के लिए मैं इस समस्या को लॉक कर दूंगा।