আকারের সাথে প্রোপাইপ অ্যারে প্রতিক্রিয়া জানান

Question

প্রোপাইটিপগুলি ব্যবহার করার কোনও অন্তর্নিহিত উপায় রয়েছে তা নিশ্চিত করার জন্য যে কোনও উপাদানের অ্যারে আসলে কোনও নির্দিষ্ট আকারের অবজেক্টের অ্যারে রয়েছে?

এরকম কিছু হতে পারে?

annotationRanges: PropTypes.array(PropTypes.shape({
    start: PropTypes.number.isRequired,
    end: PropTypes.number.isRequired,
})),

আমি এখানে খুব সুস্পষ্ট কিছু মিস করছি? দেখে মনে হচ্ছে এটির জন্য অত্যন্ত সন্ধান করা হবে।

Answer 1

আপনি এখানে React.PropTypes.shape()যুক্তি হিসাবে ব্যবহার করতে পারেন React.PropTypes.arrayOf():

// an array of a particular shape.
ReactComponent.propTypes = {
   arrayWithShape: React.PropTypes.arrayOf(React.PropTypes.shape({
     color: React.PropTypes.string.isRequired,
     fontSize: React.PropTypes.number.isRequired,
   })).isRequired,
}

ডকুমেন্টেশনের প্রোপ বৈধকরণ বিভাগটি দেখুন ।

হালনাগাদ

হিসাবে react v15.5, ব্যবহার React.PropTypesঅবচিত হয় এবং prop-typesপরিবর্তে স্ট্যান্ডেলোন প্যাকেজ ব্যবহার করা উচিত:

// an array of a particular shape.
import PropTypes from 'prop-types'; // ES6 
var PropTypes = require('prop-types'); // ES5 with npm
ReactComponent.propTypes = {
   arrayWithShape: PropTypes.arrayOf(PropTypes.shape({
     color: PropTypes.string.isRequired,
     fontSize: PropTypes.number.isRequired,
   })).isRequired,
}

Comments

এর .isRequiredপ্রতিটি সম্পত্তির ব্যবহারের দিকে লক্ষ্য করা মূল্যবান React.PropTypes.shape। আমি এখানে পৌঁছেছি কারণ ভুল করে ধরেছিলাম যে এটি ব্যবহার .isRequiredকরে React.PropTypes.arrayOfআমার ভিতরে এটির দরকার নেই। পূর্ণ কভারেজ বৈধতা অর্জন করতে, আমি আসলে এটি সরাসরি প্রয়োগ React.PropTypes.shapeকরেও শেষ করেছি।

— গুলফ্লাম

হ্যাঁ, আমি আপনার চেয়ে ঠিক একই জিনিসটি করছিলাম তবে আপনি যে কীগুলি চান তা কেবলমাত্র পতাকাঙ্কিত করার সম্ভাবনাটি আরও শক্তিশালী। সুস্পষ্ট উপায় আমার দ্বারা জড়িত চেয়ে সর্বদা ভাল।

— পিয়েরে অপরাধীতা

এই উদাহরণটি আমার জন্য সঠিকভাবে বৈধতা ব্যর্থ করে না। যদি হয় তবে arrayWithShape[] (একটি খালি অ্যারে) এটি ব্যর্থ হয় না। যদি arrayWithShapeএটি {} (কোনও বস্তু) হয় তবে এটি ব্যর্থ হয়। যদি arrayWithShape হয় [{dumb: 'something'}](সঠিক প্রপস ব্যতীত একটি অ্যারে) এটি ব্যর্থ হয়। যদি arrayWithShapeখালি অ্যারে হয় তবে বৈধতা ব্যর্থ করতে আমার এটি দরকার । আমি কেবল এটি পাস করার জন্য চাই যদি এটির কোনও অবৈধ অ্যারে থাকে যা প্রপস রয়েছে colorএবং fontsize। আমি কী মিস করছি?

— এসডিসি

Answer 2

হ্যাঁ, কোডটির PropTypes.arrayOfপরিবর্তে আপনাকে ব্যবহার PropTypes.arrayকরতে হবে, আপনি এরকম কিছু করতে পারেন:

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  annotationRanges: PropTypes.arrayOf(
    PropTypes.shape({
      start: PropTypes.string.isRequired,
      end: PropTypes.number.isRequired
    }).isRequired
  ).isRequired
}

এছাড়াও সম্পর্কে আরো বিস্তারিত জানার জন্য proptypes , এখানে যান PropTypes সঙ্গে Typechecking এখানে

Comments

প্রোপটাইপস.শপ অবজেক্টে .is প্রয়োজনীয় যুক্ত করার কারণ কী?

— makovkastar

@ মাকোভকাস্টার কারণ এটি না থাকলে, [undefined]

— বৈধতাটি

Answer 3

এবং এটি আমার নাকের নীচে রয়েছে:

ডক্স নিজেদের প্রতিক্রিয়া: https://facebook.github.io/react/docs/reusable-components.html

// An array of a certain type
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

Answer 4

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

import React, { Component } from 'react';
import { arrayOf, shape, number } from 'prop-types';

class ExampleComponent extends Component {
  static propTypes = {
    annotationRanges: arrayOf(shape({
      start: number,
      end: number,
    })).isRequired,
  }

  static defaultProps = {
     annotationRanges: [],
  }
}

Comments

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

— ফ্লফিকিটেন

Answer 5

আমি যদি একাধিকবার নির্দিষ্ট আকারের জন্য একই প্রপাইটিস সংজ্ঞায়িত করতে চাই তবে আমি এটিকে অ্যাবস্ট্রাক্ট করে একটি প্রোপাইপস ফাইলে বের করতে চাই যাতে যদি বস্তুর আকার পরিবর্তন হয় তবে আমাকে কেবল কোডটি এক জায়গায় বদলাতে হবে। এটি কোডবেসটি কিছুটা শুকিয়ে নিতে সহায়তা করে।

উদাহরণ:

// Inside my proptypes.js file
import PT from 'prop-types';

export const product = {
  id: PT.number.isRequired,
  title: PT.string.isRequired,
  sku: PT.string.isRequired,
  description: PT.string.isRequired,
};


// Inside my component file
import PT from 'prop-types';
import { product } from './proptypes;


List.propTypes = {
  productList: PT.arrayOf(product)
}

Answer 6

খালি অ্যারে থেকে রক্ষা করার জন্য এটিই আমার সমাধান ছিল:

import React, { Component } from 'react';
import { arrayOf, shape, string, number } from 'prop-types';

ReactComponent.propTypes = {
  arrayWithShape: (props, propName, componentName) => {
    const arrayWithShape = props[propName]
    PropTypes.checkPropTypes({ arrayWithShape:
        arrayOf(
          shape({
            color: string.isRequired,
            fontSize: number.isRequired,
          }).isRequired
      ).isRequired
    }, {arrayWithShape}, 'prop', componentName);
    if(arrayWithShape.length < 1){
      return new Error(`${propName} is empty`)
    }
  }
}