如何将React父组件传递的字符串转为子组件所需的PropTypes.number

嘿，这个问题其实很好解决——咱们只需要在传递latitude和longitude这两个参数的时候，把字符串直接转换成数字类型就可以啦！下面给你几种常用的转换方式，你可以根据自己的场景选择：

方法一：使用parseFloat()（推荐处理小数场景） #

因为经纬度通常是带小数的数值，parseFloat()可以精准地把字符串解析成浮点数，非常适合这个场景：

<ListItem 
  title="Endereço" 
  rightTitle={location ? location : '-'} 
  hideChevron 
  onPress={() => this.props.navigation.navigate('Maps', {
    latitude: parseFloat(latitude), 
    longitude: parseFloat(longitude)
  })} 
/>

方法二：使用Number()构造函数 #

Number()是更通用的类型转换方式，它能把合法的数字字符串转成数字，包括整数和浮点数：

<ListItem 
  title="Endereço" 
  rightTitle={location ? location : '-'} 
  hideChevron 
  onPress={() => this.props.navigation.navigate('Maps', {
    latitude: Number(latitude), 
    longitude: Number(longitude)
  })} 
/>

方法三：使用一元+操作符（简洁写法） #

这是一种更简洁的转换方式，效果和Number()基本一致，适合追求代码简洁的场景：

<ListItem 
  title="Endereço" 
  rightTitle={location ? location : '-'} 
  hideChevron 
  onPress={() => this.props.navigation.navigate('Maps', {
    latitude: +latitude, 
    longitude: +longitude
  })} 
/>

额外：处理可能的非法值 #

如果你的latitude或longitude有可能是空字符串、非数字字符串这类非法值，建议加上默认值兜底，避免子组件收到NaN：

<ListItem 
  title="Endereço" 
  rightTitle={location ? location : '-'} 
  hideChevron 
  onPress={() => this.props.navigation.navigate('Maps', {
    latitude: !isNaN(parseFloat(latitude)) ? parseFloat(latitude) : 0,
    longitude: !isNaN(parseFloat(longitude)) ? parseFloat(longitude) : 0
  })} 
/>

这样处理之后，传递给子组件的latitude和longitude就都是PropTypes.number类型了，完美匹配子组件的期望！

内容的提问来源于stack exchange，提问作者Italo Rodrigo