Question

我正在开发一个React Native应用程序，其中我将一些组件移至了共享组件，例如drop-downdown-list，超链接。这些共享组件由显示屏幕的其他组件使用。（或页面）在移动应用中。

以前，我包括警报框，该框分别显示在所有4个组件中。现在，我将警报框（仅是反应本机警报）作为共享组件，仅在isAlertVisible属性为true且正在更新时才尝试显示该警报框每个组件分别在redux中使用它（isAlertVisible）。

例如：如果我有4个屏幕（使用4个不同的组件显示），并且需要在每个屏幕中显示警报框，则在这4个组件中的每个组件中声明一个prop isAlertVisible并通过以下方式对其进行更新从所有组件分别调度动作toggleAlertVisible（），并使用redux切换isAlertVisible（对或错）。我的问题是，如果我将Alert设为共享组件，那我怎么知道从哪个状态开始组件是对isAlertVisible的更新。

我通过传递isAlertVisible作为4个组件中的每个组件的道具进行了尝试，并且更新了每个组件中的prop isAlertVisible （即从true切换为false以及从false切换为true），但共享组件（即Alert组件）中的prop不会更新。（显示未定义）

注意：我从4个组件中的每个组件中传递警报标题，消息，按钮的名称作为道具，并且可以在Alert组件中进行调试时看到这些更改，但道具isAlertVisible没有得到更新（即未切换）并显示为未定义

如果我做错了方法，也请纠正我。

这是alertbox.tsx中的代码

import * as React from "react";
import { connect } from "react-redux";
import {State} from "../../../../store/reducer";
import { AlertBox, AlertBoxContainerProps } from "./alertbox";

export interface AlertBoxContainerState {
    isAlertVisible?: boolean;
}

export class AlertBoxContainer extends React.Component<AlertBoxContainerProps, AlertBoxContainerState> {


    render() {
        return (
            <AlertBox
                isAlertVisible={this.props.isAlertVisible} // getting undefined here
                alertHeader={this.props.alertHeader}
                alertMessage={this.props.alertMessage}
                alertLeftButtonText={this.props.alertLeftButtonText}
                alertRightButtonText={this.props.alertRightButtonText}
                alertLeftButton={this.props.alertLeftButton}
                alertRightButton={this.props.alertRightButton}
            />
        );
    }
}


export default connect<any, AlertBoxContainerProps, AlertBoxContainerProps>(
    mapStateToProps,
    null
)(AlertBoxContainer);

这是alertbox-container.tsx中的代码


import * as React from "react";
import { Alert, View } from "react-native";

export interface AlertBoxContainerProps {
    isAlertVisible?: boolean;
    alertLeftButton?: () => any;
    alertRightButton?: () => any;
    alertHeader?: string;
    alertMessage?: string;
    alertLeftButtonText?: string;
    alertRightButtonText?: string;
}

export const AlertBox = (props: AlertBoxContainerProps) => {
    return (
        <View>
            {}
            {props.isAlertVisible
                ? Alert.alert(props.alertHeader, props.alertMessage, [
                      { text: props.alertLeftButtonText, onPress: () => props.alertLeftButton() },
                      { text: props.alertRightButtonText, onPress: () => props.alertRightButton() }
                  ])
                : null}
        </View>
    );
};

我希望根据每个组件中isAlertVisible的状态来切换Alert组件中的道具isAlertVisible

如何在React Native中更新共享组件的道具？

0 个答案: