React Native中如何从导入的子组件内调用父组件的自定义函数？

你可以通过props传递回调函数的方式实现子组件调用父组件方法，只需要修改两处代码即可：

步骤1：修改父组件，将目标函数作为props传递给子组件 #

在父组件的CardheaderSlider标签上新增自定义属性，把test函数传进去：

export default function Home(props) {
    function test(){
        alert("asd")
    }

    // 补充原代码遗漏的return语句
    return (
        <>
            <CardheaderSlider name="All" onSliderClick={test} />
            <CardheaderSlider name="English" onSliderClick={test} />
            <CardheaderSlider name="Mathematics" onSliderClick={test} />
            <CardheaderSlider name="Science" onSliderClick={test} />
            <CardheaderSlider name="Languages" onSliderClick={test} />
            <CardheaderSlider name="Activity Books" onSliderClick={test} />
            <CardheaderSlider name="E-Training" onSliderClick={test} />
        </>
    )
}

这里我们把父组件的test函数命名为onSliderClick属性传给子组件，属性名可根据需求自定义。

步骤2：修改子组件，触发父组件传入的回调函数 #

在子组件的Pressable的onPress事件中调用父组件传过来的函数即可：

export default class CardheaderSlider extends React.Component {
    render() {
        return (
            <Pressable 
                style={styles.button}
                onPress={() => this.props.onSliderClick()}
            >
                <Text style={{ color: "#fff", fontWeight: "bold" }}>{this.props.name}</Text>
            </Pressable>
        )
    }
}

如果需要把当前按钮的名称等参数回传给父组件的test函数，直接在调用时传参即可：

• 子组件修改为：

onPress={() => this.props.onSliderClick(this.props.name)}

• 父组件的test函数对应修改为接收参数：

function test(name){
    alert(`当前点击的分类是：${name}`)
}

内容的提问来源于stack exchange，提问作者keerthiseelan