Question

我想在if-else内写render return。我要编写if ImageSource === null，然后要获取以下代码。

    ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled photo picker');
  }
  else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  }
  else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  }
  else {
    let source = { uri: response.uri };
    this.setState({
      ImageSource: source,
      data: response.data

    });
  }
});

这是内部渲染返回

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
      <View style={styles.ImageContainer}>
        {this.state.ImageSource === null ? <Text>Select a Photo</Text> :
          <Image style={styles.ImageContainer} source={this.state.ImageSource} />
        }
      </View>
    </TouchableOpacity>

其他，我要获取上传的图片。

Answer 1

使用未定义更新条件 ImageSource 条件。

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
      <View style={styles.ImageContainer}>
        {this.state.ImageSource === undefined || this.state.ImageSouce === null ? <Text>Select a Photo</Text> :
          <Image style={styles.ImageContainer} source={this.state.ImageSource} />
        }
      </View>
    </TouchableOpacity>

Answer 2

尝试添加括号，并让我知道它是否有效。

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
    <View style={styles.ImageContainer}>
        {this.state.ImageSource === null ? (
            <Text>Select a Photo</Text> 
        ):(
          <Image style={styles.ImageContainer} source={this.state.ImageSource} />
        )}
     </View>
</TouchableOpacity>

Answer 3

我在您的代码中找不到任何错误吗？

或者您可以尝试这种方式。

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
  <View style={styles.ImageContainer}>

    {!this.state.ImageSource && <Text>Select a Photo</Text> }
    {this.state.ImageSource && <Image style={styles.ImageContainer} source={this.state.ImageSource} />
    }
  </View>
</TouchableOpacity>

Answer 4

通常在执行

等内联条件渲染时发生

{var && <MyComponent />}

如果var为true，它将呈现MyComponent。但是它试图渲染var的值。解决方法是更改条件，以确保它是

之类的布尔表达式。

{var !== 0 && <MyComponent/ >}.

因此您可以像这样更改代码

<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
  <View style={styles.ImageContainer}>
    {this.state.ImageSource === null && <Text>Select a Photo</Text> }
    { this.state.ImageSource &&  <Image style={styles.ImageContainer} source={this.state.ImageSource} />
    }
  </View>
</TouchableOpacity>

这应该有效！有关更多详细信息，请参阅此thread

Answer 5

我建议您将渲染函数分成几个小函数，例如：

renderTitle = () => <Text>Select a Photo</Text> 

renderImage = () => <Image style={styles.ImageContainer} source={this.state.ImageSource} />

 render(){
  return <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
      <View style={styles.ImageContainer}>
        {this.state.ImageSource === null ? this.renderTitle() : this.renderImage()
        }
      </View>
    </TouchableOpacity>
}

如果在render return内部其他情况下如何写反应本机

5 个答案: