Question

我有一个父子组件，我想在子组件中调用父方法，如下所示：

import Parent from './parent.js';
class Child extends React.Component {
    constructor(props) {
        super(props);
        };

    click() {
        Parent.someMethod();
    }

    render() {
          <div>Hello Child onClick={this.click}</>
    }
}

class Parent extends React.Component {
    constructor(props) {
        super(props);
        };

    someMethod() {
        console.log('bar');
    }

    render() {
          <div>Hello Parent</>
    }
}

这会返回错误消息：

Uncaught TypeError: _Parent2.default.someMethod is not a function

如何在子组件中调用此父方法？

Answer 1

试试这个。将函数作为props传递给子组件。

import Parent from './parent.js';
class Child extends React.Component {
    constructor(props) {
        super(props);
        };

    click = () => {
        this.props.parentMethod();
    }

    render() {
          <div onClick={this.click}>Hello Child</div>
    }
}

class Parent extends React.Component {
    constructor(props) {
        super(props);
        };

    someMethod() {
        console.log('bar');
    }

    render() {
          <Child parentMethod={this.someMethod}>Hello Parent, {this.props.children}</Child>
    }
}

Answer 2

您可以尝试通过将父代的状态传递给孩子，然后使用子类中的props来调用父函数。

class FlatListItem extends Component{
constructor(props){
    super(props)

}
render(){

    return(
             <TouchableOpacity style={styles.button} 
                                    onPress= 
                               {(item)=>this.props.parentFlatlist.delete(item)}></TouchableOpacity>
        </Swipeout>
    )
}}

现在考虑您有一个父类RandomList：

class RandomList extends Component{
static navigationOptions = ({navigation}) =>{
    return{
        headerTitle: 'Random List'
    }
};

state = {
    lists : [],
    refreshing : false
}

constructor(props){
    super(props)

}
delete= (item) =>{
//delete your item
      console.log(item)
}
    render(){
        return(
            <BackgroundImageComponent>
                            <FlatList
                                keyExtractor={item => item}
                                data = {this.state.lists}
                                renderItem = {({item,index}) => (
                               <FlatListItem onPress={()=>this.seeTheList(item)} item1={item} parentFlatList={this} index={index}>

                               </FlatListItem>
                            )}
                            />
                        </ScrollView>
        </BackgroundImageComponent>
    )
}}export default RandomList

请参阅此处，我正在传递parentFlatlist = {this}，然后稍后将在子类中使用相同的实例。主要思想是专注于我能够呈现删除功能的方式，而不是专注于代码。如果代码放错位置或损坏，请原谅我。

React - 在子组件中调用父方法

2 个答案: