Reactjs 如果子级有render方法，而父级没有'；T_Reactjs_Mapquest

Reactjs 如果子级有render方法，而父级没有'；T

reactjs

Reactjs 如果子级有render方法，而父级没有'；T,reactjs,mapquest,Reactjs,Mapquest,我在没有render方法的父组件中使用了mapquest，但我想将数据从具有render方法的子组件传递给父组件，因为我是新手，所以我真的不知道该怎么做。所以请一定要回复 #子组件 #app.js import React from 'react'; export default class FetchRandomUser extends React.Component { state= { loading :true, }; async componentDidMount() { co

我在没有render方法的父组件中使用了mapquest，但我想将数据从具有render方法的子组件传递给父组件，因为我是新手，所以我真的不知道该怎么做。所以请一定要回复

#子组件

#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>
 );
 }
 }

#app.js
从“React”导入React；
导出默认类FetchRandomUser扩展React.Component
{
陈述=
{
加载：对，
};
异步组件didmount（）
{
常量url=”http://www.mapquestapi.com/directions/v2/alternateroutes? 
key=key&from=solapur&to=pune&maxRoutes=2&timeOverage=100”；
const response=等待获取（url）；
const data=wait response.json（）；
this.setState（{points:data.route，load:false}）；
}
render（）
{
返回(
{this.state.loading | |！this.state.points(
加载。。
) :(
路由1:{this.state.points.shape.shapePoints}
二号干线：
{this.state.points.alternateRoutes[0].route.shape.shapePoints}
) }
);
}
}

我想将这些路线1和路线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(),
  center: [35.791188, -78.636755],
  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],
          iconAnchor: [20, 29],
          popupAnchor: [0, -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);`

父组件
#index.html
地图路线



获得减额
`#app.js
设map=L.map（'map'{
层：MQ.mapLayer（），
中间：[35.791188，-78.636755]，
缩放：12
});
函数运行方向（开始、结束）{
//删除后重新创建新地图图层
map=L.map（'map'，{
层：MQ.mapLayer（），
中间：[35.791188，-78.636755]，
缩放：12
}); 
var dir=MQ.routing.directions（）；
直达路线({
maxRoutes:5，
超时时间：25，
地点：[
开始
结束
]
});
CustomRouteLayer=MQ.Routing.RouteLayer.extend({
createStartMarker：（位置）=>{
var自定义_图标；
var标记；
自定义图标=L.图标({
iconUrl:'img/red.png'，
iconSize:[40,35]，
iconAnchor:[20,29]，
popupAnchor:[0，-29]
});
marker=L.marker（location.latLng，{图标：
自定义图标}）。添加到（地图）；
控制量表(
).addTo（地图）；
返回标记；
},
createEndMarker：（位置）=>{
var自定义_图标；
var标记；
自定义图标=L.图标({
iconUrl:'img/blue2.png'，
iconSize:[25,29]，
iconAnchor:[20,29]，
popupAnchor:[0，-29]
});
marker=L.marker（location.latLng，{图标：
自定义图标}）。添加到（地图）；
返回标记；
}
});
map.addLayer（新的CustomRouteLayer）({
方向:dir,，
菲特：是的
})); 
}
//提交表单时运行的函数
函数提交表单（事件）{
event.preventDefault（）；
//删除当前地图图层
map.remove（）；
//获取表单数据
开始=document.getElementById（“开始”）.value；
end=document.getElementById（“目的地”）.value；
//运行方向函数
运行方向（开始、结束）；
//重置表单
//document.getElementById（“表单”）.reset（）；
//单张尺寸
控制措施({
primaryLengthUnit：“公里”，
第二个长度单位：“米”，
primaryAreaUnit：未定义
}).addTo（地图）；
}
//将窗体指定为窗体变量
const form=document.getElementById（'form'）；
//提交表单时调用submitForm（）函数
格式。添加的列表器（“提交”，提交格式）`

由于我使用的是Mapquest，我不能在父模型中使用render方法，但我想将数据从子模型发送到父模型，我希望父模型通过传递一些数据（源和目标地址）调用子模型，子模型应该首先执行，然后子模型将数据发送回父模型。我该怎么做？

请添加这两个组件的代码。让我们检查一下这个代码，它对我有用