Definitelytyped: React.Children.map () और React.cloneElement () उदाहरणों की आवश्यकता है

को निर्मित 26 अक्तू॰ 2016 · 8टिप्पणियाँ · स्रोत: DefinitelyTyped/DefinitelyTyped

React.Children.map() में एक अच्छा उदाहरण नहीं है , मुझे समझ नहीं आ रहा है कि इसे कैसे टाइप किया जाए:

/*
<CheckboxGroup ...>
  <Checkbox ... />
  <Checkbox ... />
  <Checkbox ... />
</CheckboxGroup>
*/

// Child
class Checkbox extends React.Component<CheckboxProps, void> {
  // ...
}

// Parent
class CheckboxGroup extends React.Component<CheckboxGroupProps, void> {
  // ...

  render() {
    const checkboxes = React.Children.map(this.props.children, checkbox =>
      React.cloneElement(checkbox, {
        name: this.props.name,
        checked: this.props.checkedValues.includes(checkbox.props.value),
        onChange: this.handleCheckboxChange.bind(this)
      })
    );

    return (
      <div>
        {checkboxes}
      </div>
    );
  }
}

(बहुत ही सामान्य उदाहरण, http://stackoverflow.com/a/32371612/990356 देखें)

this.props.children कैसे टाइप करें?
React.cloneElement() कैसे टाइप करें?
React.Children.map() कैसे टाइप करें?

अधिकांश समय मैं निम्नलिखित त्रुटि के साथ समाप्त होता हूं: Type 'string' is not assignable to type 'ReactElement<any>' , देखें #8131

स्रोत

tkrotoff

👍3

सबसे उपयोगी टिप्पणी

प्रश्न:

const checkboxes = React.Children.map(this.props.children, checkbox =>
  React.cloneElement(checkbox, {
    name: this.props.name,
    checked: this.props.checkedValues.includes(checkbox.props.value),
    onChange: this.handleCheckboxChange.bind(this)
  })
);

समाधान:

const checkboxes = React.Children.map(props.children, (checkbox: React.ReactElement<CheckboxPropsInternal>) =>
  React.cloneElement(checkbox, {
    checked: props.checkedValues.includes(checkbox.props.value),
    onChange: handleCheckboxChange
  })
);

tkrotoff 28 अग॰ 2017

👍21

सभी 8 टिप्पणियाँ

कृपया एक पुल अनुरोध भेजें। मैं इसकी समीक्षा करूंगा।

vvakame 28 अक्तू॰ 2016

@vvakame मैं नहीं कर सकता, मुझे समझ में नहीं आता कि इसे कैसे काम करना चाहिए

tkrotoff 29 अक्तू॰ 2016

मैं भी। कृपया परिभाषा लेखकों के साथ बातचीत करें।

vvakame 1 नव॰ 2016

पिंग @vsiao @thasner @basarat @pspeter3 @beckend

पिंग/लेखकों की सूची के आधार पर:

tkrotoff 9 नव॰ 2016

आपको स्पष्ट रूप से checkbox टाइप-एनोटेट या टाइप-एसर्ट करने की आवश्यकता होगी क्योंकि इस बात की कोई गारंटी नहीं है कि this.props.children में गैर-ReactElement मान शामिल नहीं हैं। उदाहरण के लिए:

React.Children.map(this.props.children, (checkbox: React.ReactElement<CheckboxProps>) => 
    React.cloneElement(checkbox) // should be ok
);

vsiao 10 नव॰ 2016

👍13

@vsiao thx बहुत, यह काम करता है!

tkrotoff 10 नव॰ 2016

प्रश्न:

const checkboxes = React.Children.map(this.props.children, checkbox =>
  React.cloneElement(checkbox, {
    name: this.props.name,
    checked: this.props.checkedValues.includes(checkbox.props.value),
    onChange: this.handleCheckboxChange.bind(this)
  })
);

समाधान:

const checkboxes = React.Children.map(props.children, (checkbox: React.ReactElement<CheckboxPropsInternal>) =>
  React.cloneElement(checkbox, {
    checked: props.checkedValues.includes(checkbox.props.value),
    onChange: handleCheckboxChange
  })
);

tkrotoff 28 अग॰ 2017

👍21

@tkrotoff आप यह भी कर सकते हैं:

    React.Children.map(this.props.children, (child: number) => {
      return child + 1
    })

यह और सुझाए गए समाधान केवल इस तथ्य का लाभ उठा रहे हैं कि React.Children.map दृढ़ता से टाइप नहीं किया गया है। आपने Checkbox प्रकार के बजाय any उपयोग किया होगा क्योंकि इस बात की कोई गारंटी नहीं है कि यह बच्चों का प्रकार होगा। इसका मतलब यह है कि यदि कोई स्ट्रिंग में पास करके घटक का उपयोग करने से चूक जाता है तो आपको रनटाइम त्रुटियां होने की संभावना है।

इस बारे में कैसा है:

class Slot extends React.PureComponent {
  render () {
    return this.props.children
  }
}

const isReactElement = (obj: {}): obj is React.ReactElement<{}> => {
  return obj.hasOwnProperty('type')
}

const isSlot = (obj: {}): obj is Slot => {
  return isReactElement(obj) && obj.type === Slot
}

const getSlots = (children: React.ReactNode) => React.Children.map(children, (child: React.ReactChild): JSX.Element | null => {
  if (isReactElement(child) && isSlot(child)) {
    return child
  }

  return null
})

class ComponentWithSlots extends React.PureComponent {
  render () {
    const [header, footer] = getSlots(this.props.children)

    return (
      <div>
        {header}
        <div>
          <h1>Welcome</h1>
          <p>This is my lovely component with slots</p>
        </div>
        {footer}
      </div>
    )
  }
}

class MyComponent extends React.PureComponent {
  render () {
    return (
      <ComponentWithSlots>
        <Slot>My Header!</Slot>
        <Slot>
          <div>github: @variousauthors</div>
        </Slot>
      </ComponentWithSlots>
    )
  }
}

जो प्रस्तुत करेगा:

My Header!
Welcome
This is my lovely component with slots

github: <strong i="17">@variousauthors</strong>

यह दृष्टिकोण हमारे पास _do_ प्रकार की जानकारी का लाभ उठाता है, जो यह है कि ReactChild एक ReactElement हो सकता है (मैंने इसका पता लगाने के लिए type का उपयोग किया है, लेकिन आप हो सकते हैं अधिक सावधान यदि आप चाहते थे)। हम अधिक वर्णनात्मक और विस्तृत भी हो सकते हैं कि Slot । मैंने देखा कि एक UI लाइब्रेरी एक पैटर्न को लागू करती है जहाँ कक्षाओं के अपने स्लॉट संलग्न होते हैं। कुछ इस तरह:

<Dropdown>
  <Dropdown.Header>
    <FancyIcon>My Header!</FancyIcon>
  </Dropdown.Header>
  {dropdownItems}
</Dropdown>

इस तरह उपयोगकर्ता प्रत्येक स्लॉट के अर्थ पर स्पष्ट है। शेष बच्चों (जिन्हें स्लॉट के रूप में पार्स नहीं किया गया है) को children नामक संग्रह में छोड़ दिया जाता है और एक ला कार्ट प्रदान किया जाता है, जिससे उपयोगकर्ता अभी भी children सामान्य रूप से उपयोग करने की अनुमति देता है, जबकि विशेष व्यवहार को आरक्षित करते हुए कस्टम स्लॉट।

संपादित करें: प्रतिक्रिया में स्पष्ट रूप से एक विधि है React.isValidElement जिसका उपयोग आप मेरे कस्टम isReactElement स्थान पर कर सकते हैं।

संपादित करें: कुछ और जो आप कर सकते हैं वह है अपने घटक पर children संपत्ति टाइप करें, ताकि उपयोगकर्ता को केवल बच्चों के रूप में चेकबॉक्स में पास करने की अनुमति हो। यह उन रनटाइम त्रुटियों से बचने में मदद करेगा।

variousauthors 15 जन॰ 2019

👍4

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Definitelytyped: React.Children.map () और React.cloneElement () उदाहरणों की आवश्यकता है

सबसे उपयोगी टिप्पणी

सभी 8 टिप्पणियाँ

संबंधित मुद्दों