Question

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

方法-1 ：如果条件为true，则直接返回Alert组件，如果条件为false，则直接返回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'。类型“无效”不能分配给类型“ 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元素的构造函数。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>
);

};

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

”类型“无效”不能分配给类型“ ReactNode”。ts（2322） index.d.ts（725，39）：预期的类型来自属性'children'，该属性在此处声明为'IntrinsicAttributes＆IntrinsicClassAttributes＆Readonly>'“。

Answer 1

从其他条件中删除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()不是组件，而是一个函数（称为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>
    );
  }
}

以您为例，每当您切换道具时，都要拨打警报，一切都应该变桃红色！

如何在React Native中有条件地呈现警报组件

3 个答案: