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

IT技术 javascript reactjs
2021-04-01 03:32:21

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

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

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

2个回答

试试这个。将函数作为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>
    }
}
运行这个会产生错误warning.js:36 Warning: Unknown prop parentMethodon <div> tag. Remove this prop from the element
2021-05-26 03:32:21
那是因为由于this某种原因没有正确绑定到您的class。尝试.bind在构造函数中使用。不完全确定为什么，因为它应该有效。
2021-06-06 03:32:21
@ user94628 这是因为它需要是Child组件而不是div. 更新。
2021-06-07 03:32:21
我收到此错误：TypeError: Cannot read property 'props' of undefined在 Child 组件中。
2021-06-15 03:32:21
我问了一个问题，关于这样的事情，例如我需要调用this.props.parentMethod();子组件类的外部任何想法@MartinDawson
2021-06-19 03:32:21

您可以尝试通过将父类的状态传递给子类来调用父类的函数，然后使用子类中的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} ，然后稍后将在子类中使用相同的实例。主要思想是专注于我能够呈现删除函数的方式，而不是专注于代码。如果代码放错地方或损坏，请原谅我。

不要这样做。孩子没有理由需要访问整个class，而是传递您需要的内容，这样就不会产生歧义。如果您将整个类传递下去，开发人员最终也可能会做一些愚蠢的事情，例如在子组件中设置状态。
2021-05-31 03:32:21
是的，完全有道理！感谢分享
2021-06-09 03:32:21
其它你可能感兴趣的问题
上一篇如何从我的 React Web 应用程序发送电子邮件 下一篇为什么，确切地说，我们需要 React.forwardRef？