Javascript 在react手册3中使用createControlComponent时更新道具

按照的官方参考更新控制组件的道具

核心API导出其他可以 以类似的方式使用

我模仿了这个例子，但我得到了以下语法错误：

从“传单”导入L；
进口“传单传送机”；
从“@react传单/core”导入{createControlComponent}；
导入“传单发送机器/dist/传单发送机器.css”
功能设定航路点（道具）
{
返回{
航路点：[
L.latLng（道具惊跳，道具惊跳），
L.latLng（支柱endLat，支柱endLng）
],
线路选项：{
样式：[{颜色：#0500EE，重量：4}]
},
秀:假,，
addWaypoints:false，
拉格朗日之旅：没错，
DragableWayPoints：正确，
fitSelectedRoutes:正确，
备选方案：错误，
createMarker:function（）{return null；}，
}
}
函数createRoutingMachine（道具、上下文）
{
常量实例=新的L.Routing.control（设置航路点（道具））
返回
{ 
实例，上下文：{…上下文，覆盖容器：实例}
}
}
函数updateRoutingMachine（实例、props、prevProps）
{
if（props.endLat！==prevProps.endLat | | props.endLng！==prevProps.endLng）
{
实例.设置航路点（道具）
}
}
const RoutingMachine=createControlComponent（createRoutingMachine，updateRoutingMachine）
导出默认路由机；

缺少分号。（35:25）

33 |返回34 |{

35 |实例，上下文：{…上下文，覆盖容器：实例}
|^36 |}

如果我将此更改为：

功能createRoutingMachine（道具）
{
常量实例=新的L.Routing.control（设置航路点（道具））
返回实例
}

编译器很高兴，但组件从不更新

我知道我创建的控件组件不正确，但我找不到正确实现的信息

相关：

---

您会注意到，在文档中，只列出了一个参数，这是创建实例的函数。您希望它的行为类似，这需要两个参数。在createlayercomponent中，第二个参数是当道具更改时更新图层组件的函数。但是，

createcontrolcomponent

不提供此类功能。react单张假设，就像香草单张一样，一旦控件添加到地图中，就不需要直接修改它

这对于传单路由机器来说有点混乱，因为您不需要更改控件的实例，而是需要调用影响地图显示的方法

在我看来，最好的方法是使用状态变量来跟踪您的航路点是否已更改，并使用ref访问路由机器的基础传单实例，然后调用

设置航路点

：

//RoutineMachine.jsx
const createRoutineMachineLayer=（道具）=>{
const{waypoints}=道具；
const实例=L.Routing.control({
航路点，
…其他选择
});
返回实例；
};
//仅接受1个参数：
const RoutingMachine=createControlComponent（createRoutineMachineLayer）；

//Map.jsx
常量映射=（道具）=>{
//创建一个ref
const rMachine=useRef（）；
//创建一些状态变量，任何状态变量，以跟踪更改
常数[点，设定点]=使用状态（真）；
const pointsToUse=点？点1：点2；
//使用响应航路点状态变量变化的效果
useffect（（）=>{
if（机器电流）{
R机器当前设定点（使用点）；
}
}，[pointsToUse，rMachine]）；
返回(
设定点（！点）}>
切换点状态和道具
);
};

额外好处：在

组件（或任何react组件）上强制重新播放的一种廉价而简单的方法是为其分配一个

键

道具，并在您想要重新播放时更改该键道具。这可能是一个uuid，甚至是通过JSON.stringify运行的一组唯一的航路点。只是个主意