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

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

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

import Parent from./Parent.js'；
子类扩展了React.Component{
建造师（道具）{
超级（道具）；
};
单击（）{
Parent.someMethod（）；
}
render（）{
Hello Child onClick={this.click}
}
}
类父类扩展了React.Component{
建造师（道具）{
超级（道具）；
};
someMethod（）{
console.log（'bar'）；
}
render（）{
你好，家长
}
}

这将返回一条错误消息：

未捕获类型错误：\u Parent2.default.someMethod不是函数

---

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

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

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

import Parent from./Parent.js'；
子类扩展了React.Component{
建造师（道具）{
超级（道具）；
};
点击=（）=>{
this.props.parentMethod（）；
}
render（）{
你好，孩子
}
}
类父类扩展了React.Component{
建造师（道具）{
超级（道具）；
};
someMethod（）{
console.log（'bar'）；
}
render（）{
你好，家长，{this.props.children}
}
}

您可以尝试调用parent函数，方法是将父级的状态传递给子级，然后使用child类中的props进行调用

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

}
render(){

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

类FlatListItem扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回(
this.props.parentFlatlist.delete（项目）}>
)
}}

现在考虑你有一个父类随机列表：

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

类随机列表扩展组件{
静态导航选项=（{navigation}）=>{
返回{
标题：“随机列表”
}
};
状态={
列表：[]，
刷新：错误
}
建造师（道具）{
超级（道具）
}
删除=（项目）=>{
//删除您的项目
console.log（项目）
}
render（）{
返回(
项目}
数据={this.state.lists}
renderItem={（{item，index}）=>(
this.seetList（item）}item1={item}parentFlatList={this}index={index}>
)}
/>
)
}}导出默认随机列表

请看这里，我正在传递parentFlatlist={this}，然后将在稍后的子类中使用相同的实例。

---

主要思想是关注我能够呈现delete函数的方式，而不是关注代码。如果代码放错地方或已损坏，请原谅。

您将其称为静态属性。这不是，这是一种方法。我的建议是不要创建此耦合，而是将其作为道具传入。运行此操作会在标记上出现错误

warning.js:36 warning:Unknown prop

parentMethod

。从元素

@user94628中删除此道具，因为它需要是

子组件

而不是

div

。已更新。我收到此错误：

TypeError:无法读取子组件中未定义的

的属性“props”。这是因为由于某种原因，

此

未正确绑定到您的类。尝试在构造函数中使用

.bind

。不太清楚为什么，因为它应该起作用。我问了一个问题，关于类似的例子，我需要调用

this.props.parentMethod（）子组件类之外的任何想法@martindawson不要这样做。孩子没有理由需要访问整个类，而是传递您需要的内容，这样就不会模棱两可。开发人员也可能会做一些愚蠢的事情，比如在子组件中设置状态，如果你把整个类都传下去的话。是的，这非常有意义！谢谢分享