प्रतिक्रिया में चाइल्ड कंपोनेंट से पैरेंट कंपोनेंट में ऐरे कैसे पास करें यह मेरा कोड है

यह मेरा मूल घटक है

import React, { Component } from 'react';
import Child from '../Child/Child';

export default class Parent extends Component {
    render() {
        return (
            <div>
                <Child></Child>
            </div>
        )
    }
}

यह है चाइल्ड कंपोनेंट

import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        const students = ['Mark','John'];
        return (
            <div>
            </div>
        )
    }
}
0
Vamsi 24 फरवरी 2020, 21:22
2
इसका उपयोग कैसे किया जाएगा? लघु संस्करण है: माता-पिता बच्चे को एक फ़ंक्शन पास करते हैं, बच्चा उस फ़ंक्शन को कॉल करता है और सरणी में गुजरता है। लेकिन यह जाने बिना कि आप सरणी का उपयोग करने की योजना कैसे बना रहे हैं, मैं उस फ़ंक्शन का उपयोग कहां/कब/कैसे करें, इस बारे में कोई और विवरण नहीं दे सकता।
 – 
Nicholas Tower
24 फरवरी 2020, 21:26
अपने लक्ष्य को जानने की जरूरत है, आप सीधे बच्चे से पैरेंट प्रॉप्स या स्टेट सेट नहीं कर सकते हैं, लेकिन आप बच्चे को एक फंक्शन पास कर सकते हैं और इस फंक्शन को चाइल्ड से कॉल कर सकते हैं। पैरेंट कंपोनेंट फंक्शन पर आप जो चाहें कर सकते हैं
 – 
Nizam Uddin
24 फरवरी 2020, 21:30

1 उत्तर

इसे प्राप्त करने के लिए रिएक्ट कंपोनेंट्स स्टेट्स और प्रॉप्स का उपयोग करें:

अभिभावक:

import React, { Component } from 'react';
import Child from '../Child/Child';

export default class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {data: []} // Initialize the State
        this.onChildData = this.onChildData.bind(this); // Bind the helper method
    }

    /*
     * This method is just to update the state with new data incoming from Child
     * You can even inline this in your 'render' method
     */
    onChildData(data) {
        this.setState({data});
    }

    render() {
        return (
            <div>
                /*
                 * Add a 'onData' prop to invoke from Child
                 * It will work as a callback
                 */
                <Child onData={this.onChildData}></Child>
            </div>
        )
    }
}


बच्चा:


import React, { Component } from 'react'

const students = ['Mark','John'];

export default class Child extends Component {
    /**
     * componentDidMount is called by React immediately after this component is mounted
     * We use it to call the 'onData' callback and send data to the parent
     */
    componentDidMount() {
        this.props.onData(students);
    }

    render() {
        return (
            <div>
            </div>
        )
    }
}
3
David R. 24 फरवरी 2020, 21:44