আপনি কীভাবে রিঅ্যাকটিজেএসে কোনও নেস্টেড অবজেক্টের প্রোপটাইপগুলিকে যাচাই করবেন?

Question

আমি রিঅ্যাক্টজেএস-এর কোনও উপাদানগুলির জন্য আমার প্রপস হিসাবে একটি ডেটা অবজেক্ট ব্যবহার করছি।

<Field data={data} />

প্রোপটাইপস অবজেক্টটি নিজেই যাচাই করা সহজ আমি জানি:

propTypes: {
  data: React.PropTypes.object
}

তবে যদি আমি ভিতরে মানগুলি বৈধ করতে চাই? অর্থাত। ডেটা.আইডি, ডেটা.টাইটেল?

props[propName]: React.PropTypes.number.required // etc...

Answer 1

আপনি React.PropTypes.shapeবৈশিষ্ট্য যাচাই করতে ব্যবহার করতে পারেন :

propTypes: {
    data: React.PropTypes.shape({
      id: React.PropTypes.number.isRequired,
      title: React.PropTypes.string
    })
}

হালনাগাদ

@ ক্রিস মন্তব্যগুলিতে যেমন উল্লেখ করেছেন, প্রতিক্রিয়া হিসাবে সংস্করণ 15.5.0 React.PropTypesপ্যাকেজে চলে গেছে prop-types।

import PropTypes from 'prop-types';    

propTypes: {
    data: PropTypes.shape({
      id: PropTypes.number.isRequired,
      title: PropTypes.string
    })
}

অধিক তথ্য

Comments

সঠিক উত্তর @ নীলগুন। আপনি প্রতিক্রিয়াটির প্রস্তাবনাগুলির জন্য ডকুমেন্টেশনগুলি খুঁজে পেতে পারেন: ফেসবুক.

— github.io/react/docs/reusable-components.html

React.PropTypesএখন অবচয় করা হয়েছে। পরিবর্তে প্যাকেজ PropTypesথেকে ব্যবহার করুন prop-types। আরও এখানে

— ক্রিস

Answer 2

আপনি React.PropTypes.shapeযে ধরণের চেক চাইছেন তা যদি না দেয় তবে tcomb- প্রতিক্রিয়াটি দেখুন ।

এটা একটা উপলব্ধ toPropTypes()ফাংশন যা আপনি একটি স্কিমা সংজ্ঞায়িত যাচাই করতে দেয় tcomb সংজ্ঞা জন্য সমর্থন প্রতিক্রিয়া ব্যবহার করে গ্রন্থাগার কাস্টম propTypesভ্যালিডেটর ব্যবহার যাচাই চলমান tcomb-বৈধতা ।

এর ডক্স থেকে প্রাথমিক উদাহরণ :

// define the component props
var MyProps = struct({
  foo: Num,
  bar: subtype(Str, function (s) { return s.length <= 3; }, 'Bar')
});

// a simple component
var MyComponent = React.createClass({

  propTypes: toPropTypes(MyProps), // <--- !

  render: function () {
    return (
      <div>
        <div>Foo is: {this.props.foo}</div>
        <div>Bar is: {this.props.bar}</div>
      </div>
    );
  }    
});

Answer 3

খেয়াল করতে চেয়েছিলেন যে নীড়গুলি এক স্তর গভীরের বাইরেও কাজ করে। ইউআরএল প্যারামগুলি যাচাই করার সময় এটি আমার পক্ষে কার্যকর ছিল:

propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.string.isRequired
    })
  })
};

Comments

এর অর্থ কি idকেবল তখনই প্রয়োজন যখন কোনও match.paramsবস্তু আছে বা isRequiredক্যাসকেড, যার অর্থ matchপ্রপস সহ কোনও paramsবস্তুর সাথে প্রয়োজনীয় id? অর্থাত্, যদি কোনও প্যারাম সরবরাহ না করা থাকে তবে তা কি বৈধ হবে?

— এস ..

এটি "থাকা matchদরকার paramsএবং থাকা paramsদরকার " হিসাবে পড়া যায় id।

— দাচাং

হাই @ ড্যাচুং আসলে আমি যেহেতু এটি পড়েছি (এবং পরীক্ষিত) তা খুঁজে পেয়েছি এবং এটি হ'ল যদি matchউপস্থিত থাকে এবং এটি matchথাকে paramsতবে এটির paramsএকটি স্ট্রিং থাকা আবশ্যক id।

— এস ..

Answer 4

user: React.PropTypes.shap({
    age: (props, propName) => {
       if (!props[propName] > 0 && props[propName] > 100) {
          return new Error(`${propName} must be betwen 1 and 99`)
       }
       return null
    },
})

Comments

এই জবাবটিতে স্পষ্টতই যতটা প্রচেষ্টা চলে গেছে, এটি কেবল কোড যদি হয় তবে এটি উপলব্ধি করা কঠিন হতে পারে। সমাধানটি কয়েকটি বাক্য দিয়ে মন্তব্য করা স্বাভাবিক। আপনার উত্তর সম্পাদনা করুন এবং কিছু ব্যাখ্যা যুক্ত করুন।

— মিকা সুন্দল্যান্ড