如何解决如果孩子有渲染方法但父母没有，如何将reactjs中的数据从孩子传递给父母？
我在没有渲染方法的父级中使用了 mapquest，但我想将数据从具有渲染方法的子组件传递给父级，因为我是新手，我真的不知道这样做。所以请回复！
#child component
#app.js
import React from 'react';
export default class FetchRandomUser extends React.Component
{
state=
{
loading :true,};
async componentDidMount()
{
const url="http://www.mapquestapi.com/directions/v2/alternateroutes?
key=KEY&from=solapur&to=pune&maxRoutes=2&timeOverage=100";
const response= await fetch(url);
const data= await response.json();
this.setState({points: data.route,loading : false});
}
render()
{
return(
<div>
{this.state.loading || !this.state.points ? (
<div> loading..</div>
) :(
<div>
<div>Route 1:{this.state.points.shape.shapePoints}</div>
<div>Route 2:
{this.state.points.alternateRoutes[0].route.shape.shapePoints}</div>
</div>
) }
</div>
);
}
}
我想将这些 Route 1 和 Route 2 点（我显示的）发送到父模型
Parent component
#index.html
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Map Routes</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<link rel="stylesheet" href="CSS/style.css">
<!--<link href="/favicon.ico" type="image/x-icon" rel="icon" />-->
<script src="./lib/leaflet-measure.css"></script>
<script src="./lib/leaflet-measure.js"></script>
</head>
<body style="border:0;margin:0">
<div id="map"></div>
<div class="formBlock">
<form id="form">
<input type="text" name="start" class="input" id="start"
placeholder="Choose starting point"/>
<input type="text" name="end" class="input" id="destination"
placeholder="Choose destination point"/><br><br>
<button type="submit"> Get Deractions</button>
</form>
</div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js">
</script>
<script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?
key=mapquest key"></script>
<script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-routing.js?
key=mapquest key"></script>
<script src="app.js"></script>
</body>
</html>
<script>
</script>
`#app.js
let map = L.map('map',{
layers: MQ.mapLayer(),center: [35.791188,-78.636755],zoom: 12
});
function runDirection(start,end) {
// recreating new map layer after removal
map = L.map('map',{
layers: MQ.mapLayer(),zoom: 12
});
var dir = MQ.routing.directions();
dir.route({
maxRoutes: 5,timeOverage: 25,locations: [
start,end
]
});
CustomrouteLayer = MQ.Routing.RouteLayer.extend({
createStartMarker: (location) => {
var custom_icon;
var marker;
custom_icon = L.icon({
iconUrl: 'img/red.png',iconSize: [40,35],iconAnchor: [20,29],popupAnchor: [0,-29]
});
marker = L.marker(location.latLng,{icon:
custom_icon}).addTo(map);
L.control.scale(
).addTo(map);
return marker;
},createEndMarker: (location) => {
var custom_icon;
var marker;
custom_icon = L.icon({
iconUrl: 'img/blue2.png',iconSize: [25,-29]
});
marker = L.marker(location.latLng,{icon:
custom_icon}).addTo(map);
return marker;
}
});
map.addLayer(new CustomrouteLayer({
directions: dir,fitBounds: true
}));
}
// function that runs when form submitted
function submitForm(event) {
event.preventDefault();
// delete current map layer
map.remove();
// getting form data
start = document.getElementById("start").value;
end = document.getElementById("destination").value;
// run directions function
runDirection(start,end);
// reset form
//document.getElementById("form").reset();
//leaflet measure
L.control.measure({
primaryLengthUnit: 'kilometers',secondaryLengthUnit: 'meter',primaryAreaUnit: undefined
}).addTo(map);
}
// asign the form to form variable
const form = document.getElementById('form');
// call the submitForm() function when submitting the form
form.addEventListener('submit',submitForm);`
由于我使用 mapquest 我不能在父模型中使用渲染方法但我想将数据从子模型发送到父模型我希望父通过传递一些数据（源和目标地址）来调用子模型孩子应该执行首先，然后孩子将数据发送回父母。我该怎么办？
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。