reactjs - 我猜将数据传递给组件
问题描述
所以我试图在代码底部将此部分放到我的视图中......
数据来自控制台,但我需要它来显示并能够被操纵成 Miles
我一直在尝试不同的事情,但无法让它发挥作用..
我对这个东西很陌生..
//JavaScript here
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
HTML HERE
console.log(`Distance: ${result.distance} km`);
console.log(`Duration: ${result.duration} min.`)
return (
<View>
<MapView
style={{height: '70%', width: '100%'}}
initialRegion={{
latitude: 39.12690965849537,
longitude: -77.548617094021614,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
<MapViewDirections
origin={originLoc}
destination={destinationLoc}
apikey={GOOGLE_MAPS_APIKEY}
strokeWidth={5}
strokeColor="orange"
onReady={result => {
//MapData.distance = result.distance;
//MapData.duration = result.duration;
console.log(`Distance: ${result.distance} km`);
console.log(`Duration: ${result.duration} min.`);
}}
/>
<Marker coordinate={originLoc} title={'Origin'} />
<Marker
coordinate={destinationLoc}
title={'Destination'}
pinColor={'orange'}
/>
</MapView>
<View>
<Text>I am Iron Man!!!</Text>
<Text>
distance : {MapData.distance} km.time : {MapData.duration} min
</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
},
});
解决方案
尝试使用 UseState 钩子。
import React, { useState } from 'react';
const [distance, setdistance] = useState(0);
const [duration, setduration] = useState(0);
return (
<View>
<MapView
style={{height: '70%', width: '100%'}}
initialRegion={{
latitude: 39.12690965849537,
longitude: -77.548617094021614,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
<MapViewDirections
origin={originLoc}
destination={destinationLoc}
apikey={GOOGLE_MAPS_APIKEY}
strokeWidth={5}
strokeColor="orange"
onReady={result => {
setdistance(`${result.distance}`);
setduration(`${result.duration}`);
console.log(`Distance: ${result.distance} km`);
console.log(`Duration: ${result.duration} min.`);
}}
/>
<Marker coordinate={originLoc} title={'Origin'} />
<Marker
coordinate={destinationLoc}
title={'Destination'}
pinColor={'orange'}
/>
</MapView>
<View>
<Text>I am Iron Man!!!</Text>
<Text>
{ distance }
{' '}
KM.time
:
{ Math.trunc(duration) || '0'}
{' '}
Min
</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
},
});
推荐阅读
- translation - 翻译在我的 symfony 应用程序中不起作用
- php - 使用 WooCommerce api 添加变体
- php - 逐行比较大型Mysql表(1列)与文件
- flutter - 如何测试断言?
- python - Python,Selenium,等待元素的文本改变
- c - 如何在c中反转char数组?
- reactjs - 如何在我的组件库中使用 React 钩子?
- python - 将许多 csvs 的文件夹读入字典,每个字典的名称都是文件名
- javascript - 如果有多个同名输入,如何检查文本输入的值?
- java - Java 8 Stream 中的一些有状态的中间操作仍然是懒惰的寻求