Javascript 反应：如何在更改子组件后正确更新父组件的状态
我是个新手，不知道能不能在这里得到一些建议 我目前正在使用Mapbox，并将地图坐标设置为曼哈顿以及有关该城市的描述。我希望每次用户按下按钮时，地图的描述和位置都会发生变化（例如，当用户单击时，地图将移动到布鲁克林） 从本质上说，我试图建立这样一个：，但在那里，社区只会滑动到按钮点击。我不确定如何将这个普通的Javascript和html迁移到React中，所以我尝试尽我所能重新创建 我的代码如下。我知道子组件是类组件，父组件是函数组件 父组件Javascript 反应：如何在更改子组件后正确更新父组件的状态,javascript,reactjs,components,mapbox,mapbox-gl-js,Javascript,Reactjs,Components,Mapbox,Mapbox Gl Js,我是个新手，不知道能不能在这里得到一些建议 我目前正在使用Mapbox，并将地图坐标设置为曼哈顿以及有关该城市的描述。我希望每次用户按下按钮时，地图的描述和位置都会发生变化（例如，当用户单击时，地图将移动到布鲁克林） 从本质上说，我试图建立这样一个：，但在那里，社区只会滑动到按钮点击。我不确定如何将这个普通的Javascript和html迁移到React中，所以我尝试尽我所能重新创建 我的代码如下。我知道子组件是类组件，父组件是函数组件 父组件 const位置=[ { “id”：“1”， “标题
const位置=[
{
“id”：“1”，
“标题”：“曼哈顿”，
‘描述’：‘文化、金融、娱乐和时尚之都。我们还需要说更多吗？’，
“摄像机”:{center:[-74.007，40.7437]，方位：25.3，变焦：11.5}
},
{
“id”：“2”，
“标题”：“布朗克斯”，
‘描述’：“一个奇妙的动物园和植物园。更不用说嘻哈音乐的诞生地了！”，
“摄影机”：{center:[-73.8709，40.8255]，方位：0，变焦：12.21}
},
{
“id”：“3”，
“标题”：“布鲁克林”，
‘描述’：“这个行政区正在经历复兴，并继续带来新的惊喜。”，
“照相机”：{中心：[-73.9499，40.626]，方位：-8.9，变焦：11.68}
},
{
“id”：“4”，
‘头衔’：‘皇后’，
‘描述’：‘体验世界上最多样化的地方之一！’，
“照相机”：{中心：[-73.8432，40.6923]，方位：36，变焦：11.37}
},
{
“id”：“5”，
“标题”：“斯塔顿岛”，
‘描述’：‘这是一个适合家人和朋友的好地方，风景迷人，有很多公园，还可以免费乘坐渡轮！’，
“照相机”:{center:[-74.1991，40.5441]，方位：28.4，变焦：11.64}
},
{
“标题”：纽约五个行政区，
“描述”：“纽约市由五个行政区组成：布朗克斯区、布鲁克林区、曼哈顿区、皇后区和斯塔顿岛。每个行政区都有自己的吸引力，更不用说数据了！”，
“摄影机”：{中心：[-74.0315，40.6989]，变焦：9.68，方位：0，俯仰：0}
}
];
函数邻域（）{
const[count，setCount]=useState（0）；
康斯特区=
const[map，setMap]=useState（自治区）；
功能增加（）{
设置计数（计数+1）；
setMap（）；
}
函数减少（）{
设置计数（计数-1）；
setMap（）；
}
返回(
{count}
-
+
{map}
);
}
导出默认邻域；
mapboxgl.workerClass=MapboxWorker；
mapboxgl.accessToken=''；
导出默认类区域扩展React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
标题：this.props.data.title，
description:this.props.data.description，
lat:这个.道具.数据.摄像机.中心[0]，
龙：这个。道具。数据。摄像机。中心[1]，
缩放：this.props.data.camera.zoom，
方位：this.props.data.camera.轴承
}
this.mapContainer=React.createRef（）；
}
componentDidMount（）{
const{lat，long，zoom，bearing}=this.state；
常量映射=新的mapboxgl.map({
容器：this.mapContainer.current，
风格：'mapbox://styles/mapbox/streets-v11',
中心：[解析浮点（lat），解析浮点（long）]，
maxZoom:16，
minZoom:9，
缩放：解析浮点（缩放），
轴承：浮子（轴承），
投球：50
});
}
render（）{
const{title，description}=this.state；
返回(
{title}
{description}
);
}
}