React Native 调用回调函数

Question

我的自定义组件上有一个函数，它基本上是一个回调，用于从调用它的地方重新呈现（this.setState（））组件。

我正在为这些调用的正确语法而苦苦挣扎。你能帮忙吗？

自定义组件

export class LanguageSelector extends Component {

afterChange(callback: any){

    callback();

}

导入 LanguageSelector 的其他组件：

<LanguageSelector afterChange={() => { this.setState({}) }} ></LanguageSelector>

语言选择器

    import React, { Component } from 'react';

import {

    View,

} from 'react-native';

import { TouchableOpacity } from 'react-native';

import Flag from 'react-native-flags';

import { Global } from '../global'

import PropTypes from 'prop-types';

export class LanguageSelector extends Component {

    afterChange(callback: any) {

        callback();

    }

    changeLang(lang: string) {

        Global.localizedStrings.setLanguage(lang);

        //this.setState({});

    }

    render() {

        return (

            <View style={{ paddingBottom: 10, flexDirection: "row", alignSelf: "flex-end" }}>

                <TouchableOpacity onPress={() => this.changeLang('de')}>

                    <Flag code="DE" size={32} />

                </TouchableOpacity>

                <TouchableOpacity onPress={() => this.changeLang('en-US')}>

                    <Flag code="GB" size={32} />

                </TouchableOpacity>

            </View>

        )

    }

}

Answer 1

抱歉，您以为您使用的是 Typescript，您有这个选项，或者直接在您想要的地方使用 this.props.afterChange()。interface LanguageSelectorProps{&nbsp; &nbsp;afterChange: () => void;}export class LanguageSelector extends Component<LanguageSelectorProps> {&nbsp; &nbsp; &nbsp;constructor(props) {&nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; this.afterChange = this.afterChange.bind(this);&nbsp; &nbsp; }&nbsp; &nbsp; afterChange() {&nbsp; &nbsp; &nbsp; &nbsp; this.props.afterChange(); // callback ,use whatever you want&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; changeLang(lang: string) {&nbsp; &nbsp; &nbsp; &nbsp; Global.localizedStrings.setLanguage(lang);&nbsp; &nbsp; &nbsp; &nbsp; //this.setState({});&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={{ paddingBottom: 10, flexDirection: "row", alignSelf: "flex-end" }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TouchableOpacity onPress={() => this.changeLang('de')}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Flag code="DE" size={32} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TouchableOpacity>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TouchableOpacity onPress={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.changeLang('de')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.afterChange();&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Flag code="GB" size={32} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TouchableOpacity>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }