ReactJs: PropTypes को इसके लिए क्या होना चाहिए।

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 की आपूर्ति की गई ContainerComponent, अपेक्षित object।

यदि मैं इसे एक सरणी के रूप में सेट करता हूं, तो यह विफल हो जाएगा यदि मैं इसे केवल एक बच्चा देता हूं, अर्थात:

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

चेतावनी: असफल प्रोप प्रकार: कंटेनरकेम्पोनेंट, अपेक्षित सरणी में आपूर्ति की गई वस्तु के अमान्य प्रोप बच्चे।

कृपया सलाह दें, क्या मुझे सिर्फ बच्चों के तत्वों की जांच करने के लिए परेशान नहीं करना चाहिए?

Comments

आप शायद चाहते हैंnode

— लक्स

केवल एक

— अब्देनूर TOUMI

कृपया नीचे मेरा जवाब देखें जो अधिक विकल्पों का वर्णन करता है, लेकिन, यदि आप घटक बच्चे की तलाश कर रहे हैं तो यह PropTypes.element है। PropTypes.node ऐसी किसी भी चीज़ का वर्णन करता है जिसका प्रतिपादन किया जा सकता है - तार, संख्या, तत्व या इन चीजों की एक सरणी। अगर यह आपको सूट करता है तो यह तरीका है।

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

केवल एक चीज जो इस उत्तर को स्पष्ट करेगी, यदि आप React.PropTypes.nodeकिसी भी रेंडर योग्य ऑब्जेक्ट का वर्णन करने के लिए @ggilberth के उत्तर के समान नोट शामिल करते हैं ।

— theotherjim

सरणी के लिए कोई ज़रूरत नहीं है, बस PropTypes.node। यह निम्नलिखित सुधार को नियंत्रित करता है: कुछ भी नहीं, स्ट्रिंग, एकल तत्व, कई तत्व, टुकड़ा, घटक।

— दिमा तिस्नेक

Answer 2

मेरे लिए यह घटक पर निर्भर करता है। यदि आप जानते हैं कि आपको इसकी आवश्यकता क्या है, तो आपको विशेष रूप से, या कई प्रकारों का उपयोग करने की कोशिश करनी चाहिए:

PropTypes.oneOfType 

हालाँकि, मैं ज्यादातर सामान्य घटकों के साथ पाता हूँ, जिनमें कई प्रकार के बच्चे हो सकते हैं, मैं इसका उपयोग करके खुश हूँ:

PropTypes.any

यदि आप एक प्रतिक्रिया घटक को संदर्भित करना चाहते हैं तो आप खोज रहे होंगे

PropTypes.element

हालांकि,

PropTypes.node

किसी भी चीज का वर्णन किया जा सकता है - तार, संख्या, तत्व या इन चीजों की एक सरणी। अगर यह आपको सूट करता है तो यह तरीका है।

Comments

Proptypes.anyबहुत सामान्य प्रकार है। एस्लिंट इससे खुश नहीं हैं।

— एलेक्स श्वार्क

Answer 3

PropTypes प्रलेखन में निम्नलिखित हैं

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

चित्र: अपेक्षित प्रकार भिन्न होने पर आपको कंसोल में त्रुटि दिखाई देती है