有条件地渲染按可触摸突出显示

Question

我正在尝试有条件地渲染一个onPress，如果描述道具undefined，我确实想要任何onPress功能。无论如何，我的onPress都会触发，如果描述未定义，我该如何删除它

constructor(props) {
    super(props);
    this._onPressButton = this._onPressButton.bind(this);
}
_onPressButton(event) {
    Alert.alert(event.description);
}
render() {
    const { start, end, summary, description } = this.props;
    return (
        <TouchableHighlight
            onPress={() => {
                description == "" ? null : this._onPressButton;
            }}
        >

Answer 1

您可以像下面这样操作或禁用

constructor(props) {
    super(props);
    this._onPressButton = this._onPressButton.bind(this);
}
_onPressButton(event) {
    Alert.alert(event.description);
}
render() {
    const { start, end, summary, description } = this.props;
    return (
        <TouchableHighlight
            onPress={() => {
                description == "" ? { } : this._onPressButton; // You can add { } instead of null
            }}
           disabled={description === ""} // Or you can just disabled conditionally 
        >

Answer 2

您使用的条件将始终返回false，因为空字符串不是未定义的：

console.log(undefined == "")

这种行为非常奇怪，因为您的函数甚至没有在箭头函数中返回。

下面应该通过放置一个不执行任何操作的函数来解决问题：

onPress={description ? this._onPressButton : x => {} }

这也适用于内联，如果：

onPress={description && this._onPressButton }