如何在本机反应中有条件地呈现警报组件

Question

我正在尝试自定义警报组件。 为此，在 render() 方法中，我将 Alert 包装在 AlerBoxContainer 类中（位于 alertbox-container.tsx 文件中）。 我通过使用道具切换来渲染它。

方法-1 ：如果条件为真则直接返回Alert组件，如果条件为假则返回null。

这是在 alertbox-container.tsx 文件中：

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

interface AlertBoxState {
    showAlert: boolean;
    blurred: boolean;
    appState: any;
}

class AlertBoxContainer extends React.Component<AlertBoxContainerProps, AlertBoxState> {
    constructor(props) {
        super(props);
}

render() {
    return this.props.isAlertVisible ?
        Alert.alert(constants.ALERT_HEADER, constants.ALERT_MESSAGE, [
            { text: constants.CANCEL_TEXT, onPress: () => this.props.onCancel() },
            { text: constants.EXIT_TEXT, onPress: () => this.props.onExit() }
        ])
        :  null;
}
}

const mapStateToProps = (state: State): AlertBoxContainerProps => ({
    isAlertVisible: selectors.getIsAlertVisible(state)
});

const mapDispatchToProps = (dispatch: Dispatch<core.features.workplace.Action>): AlertBoxContainerProps => ({
    toggleAlertVisible: () => dispatch(core.features.workplace.toggleAlertVisible())
});

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

当我尝试上面的代码时，我得到了错误：

'AlertBoxContainer' 类型中的属性 'render' 不能分配给基本类型 'Component' 中的相同属性。 类型 '() => void' 不能分配给类型 '() => ReactNode'。 类型“void”不可分配给类型“ReactNode”.ts(2416)

我还尝试了以下方式：

方法 - 2：

在 alertbox-container.tsx 中：

 render() {
return (
    <AlertBox
        isAlertVisible={this.props.isAlertVisible}
        onCancel={this.props.onCancel}
        onExit={this.props.onExit}
    />
);
}

在 alertbox.tsx 文件中：

import { Alert, View } from "react-native";
import * as constants from "../../constants";
export interface AlertBoxContainerProps {
    isAlertVisible?: boolean;
    toggleAlertVisible?: () => any;
    navigation?: any;
    hardwareBackPress?: () => any;
    onExit?: () => any;
    onCancel?: () => any;
}

export const AlertBox = (props: AlertBoxContainerProps) => {
    return props.isAlertVisible
    ? (
        Alert.alert(constants.ALERT_HEADER, constants.ALERT_MESSAGE, [
            { text: constants.CANCEL_TEXT, onPress: () => props.onCancel() },
            { text: constants.EXIT_TEXT, onPress: () => props.onExit() }
        ])
    )
    : null; 
};

当我尝试这段代码时，我得到了错误：“ JSX 元素类型 'void' 不是 JSX elements.ts(2605) 的构造函数”

如何摆脱这些错误并呈现警报框？

当我尝试使用第二种方法并通过修改代码时，我可以使用以下代码呈现警报：

方法-3：

在 alertbox.tsx 中：

export const AlertBox = (props: AlertBoxContainerProps) => {
return (
    <View>
        {}
        {props.isAlertVisible
            ? Alert.alert(constants.ALERT_HEADER, constants.ALERT_MESSAGE, [
                  { text: constants.CANCEL_TEXT, onPress: () => props.onCancel() },
                  { text: constants.EXIT_TEXT, onPress: () => props.onExit() }
              ])
            : null}
    </View>
);

};

但是代码使用奇怪的语法，在视图中我需要放置空的 '{ }' 否则我会收到错误：

" 类型 'void' 不能分配给类型 'ReactNode'.ts(2322) index.d.ts(725, 39)：预期的类型来自属性 'children'，它在类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly 上声明>'" .

Answer 1

从else条件中删除null并改为写入<div />

说明：

react组件应始终返回一个jsx组件，因此在您的情况下，如果条件为false，则返回null，因此只返回一个虚拟jsx（比如<div /> ）元素。

Answer 2

 <View>
    {}
    {props.isAlertVisible
        && Alert.alert(constants.ALERT_HEADER, constants.ALERT_MESSAGE, [
              { text: constants.CANCEL_TEXT, onPress: () => props.onCancel() },
              { text: constants.EXIT_TEXT, onPress: () => props.onExit() }
          ])
        }
</View>

如果null正在创建问题，那么你可以做一个短路希望它有所帮助！

Answer 3

这个问题是Alert.alert()不是Component，它是一个函数（调用alert()方法）。 render函数必须传递给Component ，这就是你得到错误的原因。

Alert.alert()易于使用且方便。 它根本不必在render方法中工作，实际上它甚至不需要在Component中工作。 您需要做的就是在需要它时调用它。 例如，按下按钮，您可以通过以下方式调出警报：

class Example extends Component<*, *> {
  
  callAlert = () => {
    Alert.alert(
      “Alert title”,
      “Alert explanation”,
      [
        {
          text: “Yes”,
          onPress: () => console.log(“Yes pressed”),
        },
        {
          text: “No”,
          onPress: () => console.log('No Pressed'),
        },
      ],
      { cancelable: false }
    );
  };

  render() {
    return (
      <TouchableOpacity onPress={this.callAlert}>
        <Text>
          Alert Button
        </Text>
      </TouchableOpacity>
    );
  }
}

在你的情况下，每当你切换你的道具，打电话警报，一切都应该是桃子！