प्रतिक्रिया घटकों के विलंबित प्रतिपादन

Question

मेरे पास कई बच्चे घटकों के साथ एक प्रतिक्रिया घटक है। मैं बच्चे के घटकों को एक बार में नहीं देना चाहता हूं लेकिन कुछ देरी के बाद (प्रत्येक बच्चे के लिए वर्दी या अलग)।

मैं सोच रहा था - क्या ऐसा करने का कोई तरीका है? तब

getInitialState() { 
    let state = {}; 
    React.Children.forEach(this.props.children, (child, index) => { 
     state[index] = false; 
    }); 
    return state; 
} 

, जब:

Answer 1

मुझे लगता है कि ऐसा करने का सबसे सहज तरीका बच्चों को "प्रतीक्षा" prop दे रहा है, जो माता-पिता से पारित अवधि के लिए घटक को छुपाता है। डिफ़ॉल्ट स्थिति को छिपाने के लिए सेट करके, प्रतिक्रिया अभी भी घटक को तुरंत प्रस्तुत करेगी, लेकिन यह तब तक दिखाई नहीं देगी जब तक कि राज्य बदल नहीं जाता है। फिर, आप प्रोप के माध्यम से पारित अवधि के बाद इसे दिखाने के लिए फ़ंक्शन को कॉल करने के लिए componentWillMount सेट अप कर सकते हैं।

var Child = React.createClass({ 
    getInitialState : function() { 
     return({hidden : "hidden"}); 
    }, 
    componentWillMount : function() { 
     var that = this; 
     setTimeout(function() { 
      that.show(); 
     }, that.props.wait); 
    }, 
    show : function() { 
     this.setState({hidden : ""}); 
    }, 
    render : function() { 
     return (
      <div className={this.state.hidden}> 
       <p>Child</p> 
      </div> 
     ) 
    } 
}); 

फिर, मूल घटक में, आपको केवल उस अवधि को पारित करना होगा, जिसे आप बच्चे को प्रदर्शित करने से पहले प्रतीक्षा करना चाहते हैं।

var Parent = React.createClass({ 
    render : function() { 
     return (
      <div className="parent"> 
       <p>Parent</p> 
       <div className="child-list"> 
        <Child wait={1000} /> 
        <Child wait={3000} /> 
        <Child wait={5000} /> 
       </div> 
      </div> 
     ) 
    } 
}); 

Here's a demo

Answer 2

अपने पिता घटक <Father /> में, आप (का उपयोग करते हुए और उदाहरण के लिए आईडी), एक बूलियन मान, प्रस्तुत करना है या नहीं जिसका अर्थ है बताए एक प्रारंभिक राज्य है जहां आप प्रत्येक बच्चे को ट्रैक बना सकते हैं घटक माउंट किया गया है, तो आप अपने टाइमर शुरू स्थिति बदलने में:

componentDidMount() { 
    this.timeouts = React.Children.forEach(this.props.children, (child, index) => { 
     return setTimeout(() => { 
       this.setState({ index: true; }); 
     }, child.props.delay); 
    }); 
} 

आप अपने बच्चों को प्रस्तुत करना है, तो आप उन्हें पुनः द्वारा करते हैं, एक आधार के रूप में मिलान बच्चे कि अगर घटक चाहिए कहते हैं के लिए राज्य बताए प्रस्तुत किया जाना चाहिए या नहीं।

let children = React.Children.map(this.props.children, (child, index) => { 
    return React.cloneElement(child, {doRender: this.state[index]}); 
}); 

अपने <Child /> घटक

render() { 
    if (!this.props.render) return null; 
    // Render method here 
} 

जब टाइमआउट निकाल दिया जाता है में

तो, राज्य बदल गया है और पिता घटक rerendered है। बच्चों के प्रोप अपडेट किए जाते हैं, और यदि doRendertrue है, तो वे स्वयं को प्रस्तुत करेंगे।

Answer 3

आपके उपयोग के मामले पर निर्भर करता है।

यदि आप बच्चों के मिश्रण में कुछ एनीमेशन करना चाहते हैं, तो प्रतिक्रिया एनीमेशन एड-ऑन का उपयोग करें: https://facebook.github.io/react/docs/animation.html अन्यथा, बच्चों के प्रतिपादन को प्रोप पर निर्भर करते हैं और कुछ देरी के बाद प्रोप जोड़ते हैं।

मैं घटक में देरी नहीं करता, क्योंकि यह शायद परीक्षण के दौरान आपको परेशान करेगा। और आदर्श रूप से, घटक शुद्ध होना चाहिए।

Answer 4

मेरा उपयोग मामला थोड़ा अलग हो सकता है लेकिन सोचा कि यह एक समाधान पोस्ट करने के लिए उपयोगी हो सकता है क्योंकि मैं एक अलग दृष्टिकोण लेता हूं।

अनिवार्य रूप से मेरे पास एक तृतीय पक्ष पॉपओवर घटक है जो प्रोप के रूप में एंकर डीओएम तत्व लेता है। समस्या यह है कि मैं गारंटी नहीं दे सकता कि एंकर तत्व तत्काल वहां होगा क्योंकि एंकर तत्व उसी समय दिखाई देता है जैसे पॉपओवर मैं इसे एंकर करना चाहता हूं (उसी रेडक्स प्रेषण के दौरान)।

एक संभावित फिक्स पॉज़ोवर तत्व को घटक पेड़ में गहराई से रखना था, जिस तत्व को एंकर किया जाना था। हालांकि, यह मेरे घटकों की तार्किक संरचना के साथ अच्छी तरह फिट नहीं हुआ।

आखिरकार मैंने पॉपओवर घटक को फिर से प्रस्तुत करने में देरी करने का फैसला किया ताकि यह सुनिश्चित किया जा सके कि एंकर डीओएम तत्व पाया जा सके। यह एक बच्चे के रूप में पैटर्न समारोह का उपयोग करता है केवल बच्चों को एक निश्चित विलंब के बाद प्रस्तुत करना:

import { Component } from 'react' 
import PropTypes from 'prop-types' 

export default class DelayedRender extends Component { 
    componentDidMount() { 
     this.t1 = setTimeout(() => this.forceUpdate(), 1500) 
    } 

    componentWillReceiveProps() { 
     this.t2 = setTimeout(() => this.forceUpdate(), 1500) 
    } 

    shouldComponentUpdate() { 
     return false 
    } 

    componentWillUnmount() { 
     clearTimeout(this.t1) 
     clearTimeout(this.t2) 
    } 

    render() { 
     return this.props.children() 
    } 
} 

DelayedRender.propTypes = { 
    children: PropTypes.func.isRequired 
} 

यह इस तरह इस्तेमाल किया जा सकता:

<DelayedRender> 
    {() => 
     <Popover anchorEl={getAnchorElement()}> 
      <div>Hello!</div> 
     </Popover> 
    )}} 
</DelayedRender> 

मेरे लिए बहुत hacky Feels लेकिन मेरे उपयोग स्थिति के लिए काम करता है फिर भी।