রিঅ্যাক্টজেস: এই.পড়লগুলি। শিশুদের জন্য প্রোপাইপগুলি কী হওয়া উচিত?

Question

একটি সাধারণ উপাদান দেওয়া হয়েছে যা তার শিশুদের রেন্ডার করে:

class ContainerComponent extends Component {
  static propTypes = {
    children: PropTypes.object.isRequired,
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

export default ContainerComponent;

প্রশ্ন: বাচ্চাদের প্রোপ টাইপটি কী হওয়া উচিত?

যখন আমি এটিকে কোনও অবজেক্ট হিসাবে সেট করি, যখন আমি একাধিক বাচ্চাদের সাথে উপাদানটি ব্যবহার করি তখন এটি ব্যর্থ হয়:

<ContainerComponent>
  <div>1</div>
  <div>2</div>
</ContainerComponent>

সতর্কতা: ব্যর্থ প্রপ প্রকার: প্রত্যাশিত childrenপ্রকারের অবৈধ প্রকার array সরবরাহ করা হয়েছে ।ContainerComponentobject

যদি আমি এটিকে অ্যারে হিসাবে সেট করি তবে এটি কেবলমাত্র একটি শিশু দিলে এটি ব্যর্থ হবে, যেমন:

<ContainerComponent>
  <div>1</div>
</ContainerComponent>

সতর্কতা: ব্যর্থ প্রপ প্রকার: কন্টেইনার কম্পোনেন্টকে প্রত্যাশিত অ্যারে সরবরাহ করা টাইপ অবজেক্টের অবৈধ প্রপ বাচ্চারা।

দয়া করে পরামর্শ দিন, আমি কি কেবলমাত্র শিশুদের উপাদানগুলির জন্য প্রোপটাইপগুলি পরীক্ষা করে বিরক্ত করব না?

Comments

আপনি সম্ভবত চানnode

— হাল্কা

সম্ভাব্য সদৃশ শুধুমাত্র একটি মধ্যে একটি নির্দিষ্ট ধরনের সন্তান উপাদান প্রতিক্রিয়া অনুমতি

— Abdennour TOUMI

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

— ggilberth

Answer 1

এই ব্যবহার করে oneOfTypeবা এর মতো কিছু চেষ্টা করুনPropTypes.node

import PropTypes from 'prop-types'

...

static propTypes = {
    children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node
    ]).isRequired
}

অথবা

static propTypes = {
    children: PropTypes.node.isRequired,
}

Comments

দুর্ভাগ্যবশত এটা একক সন্তানের ক্ষেত্রে একই ত্রুটি সহ ব্যর্থ: "সতর্কতা: ব্যর্থ ঠেকনা টাইপ: অবৈধ ঠেকনা childrenধরনের object। ... একটি অ্যারের প্রত্যাশিত"

— d3ming

যে কাজ! সবচেয়ে সহজ সমাধানটি হ'ল children: PropTypes.nodeএটি উভয় ক্ষেত্রেই কাজ করেছিল। পরামর্শগুলির জন্য ধন্যবাদ =)

— d3ming

এই উত্তরটি পরিষ্কার করার জন্য কেবলমাত্র আপনি যদি @ggilberth এর উত্তরের অনুরূপ কোনও নোট অন্তর্ভুক্ত করেন যা React.PropTypes.nodeকোনও রেন্ডারেবল অবজেক্টকে বর্ণনা করে তা ব্যাখ্যা করার জন্য ।

— থিওথিজিম

অ্যারের প্রয়োজন নেই, ঠিক PropTypes.node। এটি নিম্নলিখিত সংশোধন পরিচালনা করে: কিছুই, স্ট্রিং, একক উপাদান, বেশ কয়েকটি উপাদান, খণ্ড, উপাদান।

— Dima Tisnek

Answer 2

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

PropTypes.oneOfType 

তবে আমি বেশিরভাগ ক্ষেত্রেই জেনেরিক উপাদানগুলির সাথে পাই যাদের অনেক ধরণের বাচ্চা থাকতে পারে, আমি এটি ব্যবহার করে খুশি:

PropTypes.any

আপনি যদি কোনও প্রতিক্রিয়া উপাদানটি উল্লেখ করতে চান তবে আপনি খুঁজছেন

PropTypes.element

যদিও,

PropTypes.node

স্ট্রিংস, সংখ্যা, উপাদান বা এই জিনিসগুলির একটি অ্যারে - রেন্ডার করা যায় এমন কোনও কিছু বর্ণনা করে। যদি এটি আপনাকে উপযুক্ত করে তবে এই উপায়।

Comments

Proptypes.anyখুব সাধারণ ধরণের। এসলিন্ট তাতে খুশি নয়।

— অ্যালেক্স শওয়ার্ক

Answer 3

প্রোপটাইপস ডকুমেন্টেশনের নীচে রয়েছে

// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node,

সুতরাং, আপনি PropTypes.nodeঅবজেক্টের বস্তু বা অ্যারেগুলি পরীক্ষা করতে ব্যবহার করতে পারেন

static propTypes = {
   children: PropTypes.node.isRequired,
}

Answer 4

এখানে উত্তরগুলি শিশুদের ঠিক চেক করা বেশ কভার বলে মনে হচ্ছে না। nodeএবং objectখুব অনুমতিপ্রাপ্ত, আমি সঠিক উপাদানটি চেক করতে চেয়েছিলাম। এখানে আমি ব্যবহার করে শেষ করেছি:

• oneOfType([])বাচ্চাদের একক বা অ্যারের অনুমতি দেওয়ার জন্য ব্যবহার করুন
• ব্যবহার করুন shapeএবং arrayOf(shape({}))একক ও শিশুদের অ্যারের যথাক্রমে জন্য
• oneOfশিশু উপাদান নিজেই ব্যবহার করুন

শেষ পর্যন্ত, এরকম কিছু:

import PropTypes from 'prop-types'
import MyComponent from './MyComponent'

children: PropTypes.oneOfType([
  PropTypes.shape({
    type: PropTypes.oneOf([MyComponent]),
  }),
  PropTypes.arrayOf(
    PropTypes.shape({
      type: PropTypes.oneOf([MyComponent]),
    })
  ),
]).isRequired

এই সমস্যাটি আমাকে আরও স্পষ্ট করে এটি বুঝতে সাহায্য করেছে: https://github.com/facebook/react/issues/2979

Answer 5

আপনি যদি কোনও উপাদানটির সাথে ঠিক মিল করতে চান তবে এটি পরীক্ষা করে দেখুন

MenuPrimary.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(MenuPrimaryItem),
    PropTypes.objectOf(MenuPrimaryItem)
  ])
}

আপনি যদি কিছু উপাদান ধরণের হুবহু মিল করতে চান তবে এটি পরীক্ষা করে দেখুন

const HeaderTypes = [
  PropTypes.objectOf(MenuPrimary),
  PropTypes.objectOf(UserInfo)
]

Header.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.oneOfType([...HeaderTypes])),
    ...HeaderTypes
  ])
}

Answer 6

একটি কাস্টম প্রোপাইপগুলি ব্যবহার করে দেখুন:

 const  childrenPropTypeLogic = (props, propName, componentName) => {
          const prop = props[propName];
          return React.Children
                   .toArray(prop)
                   .find(child => child.type !== 'div') && new Error(`${componentName} only accepts "div" elements`);
 };


static propTypes = {

   children : childrenPropTypeLogic

}

বেহালা

const {Component, PropTypes} = React;

 const  childrenPropTypeLogic = (props, propName, componentName) => {
             var error;
          var prop = props[propName];
    
          React.Children.forEach(prop, function (child) {
            if (child.type !== 'div') {
              error = new Error(
                '`' + componentName + '` only accepts children of type `div`.'
              );
            }
          });
    
          return error;
    };
    
  

class ContainerComponent extends Component {
  static propTypes = {
    children: childrenPropTypeLogic,
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}



class App extends Component {
   render(){
    return (
    <ContainerComponent>
        <div>1</div>
        <div>2</div>
      </ContainerComponent>
    )
   }
}

ReactDOM.render(<App /> , document.querySelector('section'))

<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>

<section />

Answer 7

উদাহরণ:

import React from 'react';
import PropTypes from 'prop-types';

class MenuItem extends React.Component {
    render() {
        return (
            <li>
                <a href={this.props.href}>{this.props.children}</a>
            </li>
        );
    }
}

MenuItem.defaultProps = {
    href: "/",
    children: "Main page"
};

MenuItem.propTypes = {
    href: PropTypes.string.isRequired,
    children: PropTypes.string.isRequired
};

export default MenuItem;

ছবি: প্রত্যাশিত ধরণটি আলাদা হলে কনসোলে আপনাকে ত্রুটি দেখায়