Question

正如标题所述，我试图从子组件中调用放置在父组件中的方法（componentDidMount）-我的应用程序中具有以下组件结构：

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

    componentDidMount() {
        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} />
        );
    }
}

和

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)}
                        />
                    }>
                    ...

但是如何从Today -> componentDidMount组件中调用Stats中的代码？

提前谢谢

Answer 1

您的Stats组件需要另外使用一个道具onRefresh，并将其传递给RefreshControl组件。然后，父级可以通过调用axios请求的道具提供处理程序：

class Today extends Component {
    // ...

    componentDidMount() {
        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}
            />
        );
    }
}

和

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}
                        />
                    }>
                    ...

Answer 2

这是从子组件内部调用父方法的方式

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>
        )
    }
}

Answer 3

好吧，我认为您可以为父级和子级组件获得更好的结构。我建议阅读有关其他组件与容器组件

的信息

修饰性成分

import React, {Component} from 'react';
import {View} from 'react-native';
import styles from './Header.component.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;

容器组件

import React, {Component} from 'react';
import Header from '../component/Header.component';

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
   };
 };

ReactJS-如何从子组件中调用父方法？

3 个答案: