javascript - ReactJS - how do I call a parent method from a child component? - Stack Overflow

admin管理员组

文章数量:1323348

As the title says, I am trying to call a method (ponentDidMount) placed in a parent ponent from a child ponent - I have the following ponents structure in my app:

export default class Today extends Component {
    constructor(props) {
        super(props);
        this.state = {
            stats: [],
            loading: true
        };
    }

    ponentDidMount() {
        axios.get(api_url)
            .then((res) => {
                console.log('res.data');   
                this.setState({ 
                    stats: res.data,
                    loading: false
                });
            })
    }

    render() {
        return (
            <Stats loading={this.state.loading} stats={this.state.stats} />
        );
    }
}

and

export default class Stats extends Component {

    constructor(props) {
        super(props);

    }

    onRefresh() {
        alert('X');
        // here I need to refresh the data in 'this.props.stats'
        // and re-display it (fresh data)
    }

    render() {
        const {loading, stats} = this.props;

        if (loading) {
            return (
               <Text>Loading...</Text>
            );
        } else {
            return (
                <Container>
                    <Content refreshControl={
                        <RefreshControl 
                            onRefresh={this.onRefresh.bind(this)}
                        />
                    }>
                    ...

But how do I re-call the code in Today -> ponentDidMount from the Stats ponent?

Thank you in advance

As the title says, I am trying to call a method (ponentDidMount) placed in a parent ponent from a child ponent - I have the following ponents structure in my app:

export default class Today extends Component {
    constructor(props) {
        super(props);
        this.state = {
            stats: [],
            loading: true
        };
    }

    ponentDidMount() {
        axios.get(api_url)
            .then((res) => {
                console.log('res.data');   
                this.setState({ 
                    stats: res.data,
                    loading: false
                });
            })
    }

    render() {
        return (
            <Stats loading={this.state.loading} stats={this.state.stats} />
        );
    }
}

and

export default class Stats extends Component {

    constructor(props) {
        super(props);

    }

    onRefresh() {
        alert('X');
        // here I need to refresh the data in 'this.props.stats'
        // and re-display it (fresh data)
    }

    render() {
        const {loading, stats} = this.props;

        if (loading) {
            return (
               <Text>Loading...</Text>
            );
        } else {
            return (
                <Container>
                    <Content refreshControl={
                        <RefreshControl 
                            onRefresh={this.onRefresh.bind(this)}
                        />
                    }>
                    ...

But how do I re-call the code in Today -> ponentDidMount from the Stats ponent?

Thank you in advance

• javascript
• reactjs
• react-native

Share Improve this question Follow edited Jul 30, 2018 at 22:49 trixn 16.4k22 gold badges3939 silver badges5959 bronze badges asked Jul 30, 2018 at 22:37 user2932090user2932090 33122 gold badges88 silver badges1717 bronze badges 1

• The short answer is: You shouldn't. The correct way to handle events in react is to make the parent pass a callback function to the child that it can invoke. – trixn Commented Jul 30, 2018 at 22:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Your Stats ponent needs to take an additional prop onRefresh that it passes to the RefreshControl ponent. The parent can then provide a handler via that prop that invokes the axios request:

class Today extends Component {
    // ...

    ponentDidMount() {
        this.fetchData();
    }

    fetchData = () => {
        axios.get(api_url)
            .then((res) => {
                console.log('res.data');   
                this.setState({ 
                    stats: res.data,
                    loading: false
                });
            })
    }

    // handle a refresh by re-fetching
    handleRefresh = () => this.fetchData();

    render() {
        return (
            <Stats 
                loading={this.state.loading} 
                stats={this.state.stats} 
                onRefresh={this.handleRefresh}
            />
        );
    }
}

and

class Stats extends Component {
    render() {
        const {loading, stats, onRefresh} = this.props;

        if (loading) {
            return (
               <Text>Loading...</Text>
            );
        } else {
            return (
                <Container>
                    <Content refreshControl={
                        <RefreshControl 
                            onRefresh={onRefresh}
                        />
                    }>
                    ...

This is how you call a parent method from inside the child ponent

Parent.js

import React from 'react';
import Child from './Child';

export default class Parent extends React.Component{
    parentMethod(data){
        console.log('parent method called', data)
    }
    render(){
        return (
            <div>
                <Child parentMethod={(data) => this.parentMethod(data)} />
            </div>
        )
    }
}

Child.js

export default class Child extends React.Component{
    render(){
        return (
            <div>
                <div onClick={() => this.props.parentMethod('Hello from child')} >Call Parent</div>
            </div>
        )
    }
}

Well I think you can get a better structure for your parent and child ponents. I remend read about Presentational Components vs Container Components

Presentational ponents

import React, {Component} from 'react';
import {View} from 'react-native';
import styles from './Header.ponent.style';

class Header extends Component {
  render () {
    const {title, subtitle} = this.props;
    return (
      <View style={styles.container}>
        <View style={styles.titleHeading}>{title}</View>
        <View style={styles.subtitle}>{subtitle}</View>
      </View>
    );
  }
}
export default Header;

Container ponents

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

export default class Home extends Component {
   calculateSomething = () => {
     ...some calculation / api calls....
   }
   render () {
     const {title, subtitle, goToLogin} = this.props;
     return (
       <Header title={title} subtitle={subtitle} goToLogin={goToLogin} calculateSomething={this.calculateSomething}/>
     );
   }
 }
 const mapStateToProps = (state)=>{
   return {
     title: state.title,
     subtitle: state.subtitle
   };
 };

本文标签： javascriptReactJShow do I call a parent method from a child componentStack Overflow