প্রতিক্রিয়া উপাদানটিতে কীভাবে উপাদান ডিফল্ট প্রপস সেট করবেন

Question

আমি প্রতিক্রিয়া উপাদানটিতে ডিফল্ট প্রপস সেট করতে নীচের কোডটি ব্যবহার করি তবে এটি কার্যকর হয় না। ইন render()পদ্ধতি, দেখতে পাচ্ছি আউটপুট "অনির্ধারিত সাজসরঞ্জাম" ব্রাউজার কনসোলে মুদ্রিত হয়। আমি কীভাবে উপাদানগুলির প্রপসের জন্য একটি ডিফল্ট মান নির্ধারণ করতে পারি?

export default class AddAddressComponent extends Component {

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
}

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

Answer 1

আপনি Classবন্ধনী বন্ধ করতে ভুলে গেছেন ।

class AddAddressComponent extends React.Component {
  render() {
    let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    } else {
      console.log('defined props')
    }

    return (
      <div>rendered</div>
    )
  }
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: React.PropTypes.array.isRequired,
  provinceList: React.PropTypes.array.isRequired,
}

ReactDOM.render(
  <AddAddressComponent />,
  document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

Answer 2

যারা বাবেল স্টেজ -২ বা ট্রান্সফর্ম-ক্লাস-বৈশিষ্ট্যের মতো কিছু ব্যবহার করেন তাদের জন্য :

import React, { PropTypes, Component } from 'react';

export default class ExampleComponent extends Component {
   static contextTypes = {
      // some context types
   };

   static propTypes = {
      prop1: PropTypes.object
   };

   static defaultProps = {
      prop1: { foobar: 'foobar' }
   };

   ...

}

---

হালনাগাদ

প্রতিক্রিয়া v15.5 হিসাবে, PropTypesপ্রধান প্রতিক্রিয়া প্যাকেজ ( লিঙ্ক ) থেকে সরানো হয়েছিল :

import PropTypes from 'prop-types';

সম্পাদন করা

@ জোহানদো দ্বারা চিহ্নিত হিসাবে, staticশ্রেণীর বৈশিষ্ট্যগুলি আসলে ES7 টি অনুচ্ছেদের অংশ নয়, বরং বর্তমানে কেবল বাবেল দ্বারা সমর্থিত। প্রতিফলিত আপডেট।

Comments

উত্তরের জন্য ধন্যবাদ, তবে আমি এটি সম্পর্কে আরও কিছুটা জানতে চেয়েছিলাম react/ nativeডকটি দেখেছি এবং সেগুলি খুঁজে পাইনি, এর জন্য ডকটি কোথায়?

— ফার্মকমন্ড 2

আমি প্রতিক্রিয়া দস্তাবেজগুলিতে এটি স্পষ্টভাবে মনে করি না, তবে আপনি যদি वर्गের staticভেরিয়েবলগুলি বোঝেন তবে তা বোধগম্য হয়, তাই আমি MDN এ সেগুলি পড়ার পরামর্শ দিই । মূলত, ডকুমেন্টেশনের সিনট্যাক্স এটির সমতুল্য কারণ উভয়ই প্রপস সম্পর্কে তথ্য ক্লাসে নিজেরাই যুক্ত করছেন, স্বতন্ত্র উদাহরণ নয়।

— ট্রায়হাকানসন

আমদানিটি এতে পরিবর্তন করা হয়েছে: 'প্রোপ-প্রকারগুলি' থেকে প্রোপটাইপগুলি আমদানি করুন;

— tibi

@ ট্রায়হাকানসন এমডিএন লিঙ্কটি কেবল স্থির পদ্ধতি সম্পর্কে আলোচনা করে, ভেরিয়েবলগুলি নয়। আমি বাবেল ব্যতীত স্থিতিক শ্রেণীর ভেরিয়েবলগুলির জন্য কোনও রেফারেন্স পাইনি । এটি কি স্বীকৃত ES7 সম্পত্তি?

— jhndodo

Answer 3

প্রথমে আপনার ক্লাসটি আরও এক্সটেনশনগুলি থেকে আলাদা করতে হবে প্রাক্তন আপনি এর AddAddressComponent.defaultPropsমধ্যে প্রসারিত করতে পারবেন নাclass এর পরিবর্তে এটি বাহিরে সরানো।

আমি আপনাকে কনস্ট্রাক্টর এবং রিএ্যাক্টের জীবনচক্র সম্পর্কে পড়ার জন্যও সুপারিশ করব : দেখুন কম্পোনেন্ট স্পেস এবং লাইফাইসাইকেলটি দেখুন

আপনি যা চান তা এখানে:

import PropTypes from 'prop-types';

class AddAddressComponent extends React.Component {
  render() {
    let { provinceList, cityList } = this.props;
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props');
    }
  }
}

AddAddressComponent.contextTypes = {
  router: PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

export default AddAddressComponent;

Comments

আপনি কি নিশ্চিত যে তাদের দরকার আছে constructorএবং componentWillReceiveProps? আমার কাছে মনে হয় ওপি তাদের শ্রেণীর ঘোষণার জন্য একটি বন্ধনী বন্ধনী ভুলে গেছে।

— ivarni

@ আইভান্নি অগত্যা নয় তবে তিনি জীবনচক্র, নির্মাতা এবং শ্রেণিবদ্ধতা বোঝেন গুরুত্বপূর্ণ। সুতরাং তিনি জানেন যে তিনি কী করছেন। তাই আমি কয়েকটি বাহ্যিক লিঙ্ক যুক্ত করেছি

— ইলানাস

যথেষ্ট ভাল, আমি কেবল "আপনার প্রয়োজন" বলা কঠোরভাবে সঠিক নয় বলে মনে করি । আমি বরং "জীবনচক্রটি পর্যবেক্ষণের জন্য এই পদ্ধতিগুলি যুক্ত করতে পারেন" এর পংক্তিতে কিছু বলতে চাই । অন্যথায়, ভাল উত্তর :)

— ivarni

Answer 4

আপনি ডেস্ট্রাকচারিং অ্যাসাইনমেন্টও ব্যবহার করতে পারেন।

class AddAddressComponent extends React.Component {
  render() {

    const {
      province="insertDefaultValueHere1",
      city="insertDefaultValueHere2"
    } = this.props

    return (
      <div>{province}</div>
      <div>{city}</div>
    )
  }
}

আমি এই পদ্ধতির পছন্দ করি কারণ আপনার বেশি কোড লেখার দরকার নেই।

Comments

আমি এখানে যে সমস্যাটি দেখছি তা হ'ল আপনি একাধিক পদ্ধতিতে ডিফল্ট প্রপস ব্যবহার করতে চাইতে পারেন।

— জেরার্ড ব্রুল

Answer 5

একটি স্থিতিশীল ডিফল্টপ্রস ব্যবহার করুন:

export default class AddAddressComponent extends Component {
    static defaultProps = {
        provinceList: [],
        cityList: []
    }

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
}

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

থেকে নেওয়া: https://github.com/facebook/react-native/issues/1772

আপনি যদি প্রকারগুলি পরীক্ষা করতে চান তবে ট্রাইহ্যাকসনস বা ইলান হাসানভের উত্তরে প্রোপটাইপগুলি কীভাবে ব্যবহার করবেন তা দেখুন বা উপরের লিঙ্কটিতে থাকা বহু উত্তর পর্যালোচনা করুন।

Answer 6

আপনি নীচের মত শ্রেণীর নাম ব্যবহার করে ডিফল্ট প্রপস সেট করতে পারেন।

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

আপনি আরও তথ্যের জন্য এই লিঙ্ক থেকে প্রতিক্রিয়া প্রস্তাবিত উপায় ব্যবহার করতে পারেন

Answer 7

কোনও ফাংশন প্রকারের জন্য আপনি নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:

AddAddressComponent.defaultProps = {
    callBackHandler: () => {}
};

AddAddressComponent.propTypes = {
    callBackHandler: PropTypes.func,
};

Answer 8

আপনি যদি একটি কার্যকরী উপাদান ব্যবহার করে থাকেন তবে আপনি ডিস্ট্রাকচারিং অ্যাসাইনমেন্টের ক্ষেত্রে পূর্বনির্ধারিত সংজ্ঞা দিতে পারেন:

export default ({ children, id="menu", side="left", image={menu} }) => {
  ...
};

Answer 9

class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}

Example.defaultProps = { text: 'yo' };