javascript - 我如何准确地知道存在什么样的“输入”道具变量?
问题描述
我来自 Java 背景,我正在努力学习网络语言:React。我记得在 java 中,函数是用一组输入定义的:public static int add(int x, int y)
但是,在 React 中似乎只有一个(props)
,所有输入都用作prop.x prop.y
...等
我在“kakao-map-react”包中导入以下地图组件:
var Map = function (props) {
var id = props.id;
var kakao = window.kakao;
var mapId = id ? id : 'kakao-map-react';
var map = useMapState().map;
var dispatch = useMapDispatch();
React.useEffect(function () {
if (!map) {
var events_1 = [];
var mapContainer = document.getElementById(mapId);
var mapOptions = {
center: new kakao.maps.LatLng(props.initialPosition.latitude, props.initialPosition.longitude),
level: props.level,
};
var newMap_1 = new kakao.maps.Map(mapContainer, mapOptions);
if (props.onMapLoaded) {
props.onMapLoaded(newMap_1);
}
var _loop_1 = function (event_1) {
if (props[event_1.key]) {
kakao.maps.event.addListener(newMap_1, event_1.event, function (mouseEvent) {
if (props[event_1.key]) {
if (event_1.hasMouseEvent) {
var handler = props[event_1.key](newMap_1, mouseEvent);
events_1.push({
target: newMap_1,
type: event_1.event,
handler: handler,
});
}
else {
var handler = props[event_1.key](newMap_1);
events_1.push({
target: newMap_1,
type: event_1.event,
handler: handler,
});
}
}
});
}
};
for (var _i = 0, eventsArr_1 = eventsArr; _i < eventsArr_1.length; _i++) {
var event_1 = eventsArr_1[_i];
_loop_1(event_1);
}
dispatch({
type: 'SET_MAP',
payload: newMap_1,
});
return function () {
for (var _i = 0, events_2 = events_1; _i < events_2.length; _i++) {
var event_2 = events_2[_i];
kakao.maps.event.removeListener(event_2.target, event_2.type, event_2.handler);
}
};
}
else {
return function () {
};
}
}, []);
/*
* Set new center if long lat changes
* */
React.useEffect(function () {
if (map) {
map.setCenter(new kakao.maps.LatLng(props.center.latitude, props.center.longitude));
}
}, [
props.center.latitude,
props.center.longitude,
props.center.token,
]);
/*
* Set new level if props.level changes
* */
React.useEffect(function () {
if (map) {
map.setLevel(props.level);
}
}, [
props.level
]);
return (React.createElement("div", { id: mapId, style: {
height: '100%'
} }, props.children));
};
在这个长代码中,我怎么知道我需要插入什么样的输入(道具)?
我试过 Ctrl-F 'props',但是太多了,我不明白哪个输入是哪个:
props.id, props.initialPosition.latitude, props.initialPosition.longitude, props.level, props.onMapLoaded, props[event_1.key], props.center.latitude, props.center.longitude, props.center.token.
谢谢你。
解决方案
我自己有 Java 背景,很惊讶地发现 JavaScript 世界中的许多文档并不关心其 API 引用中的数据类型。你有两个选择:
浏览他们在 GitHub 或他们的官方网站上的文档。一个维护良好的项目会列出他们的输入道具以及他们需要的类型。
您在文档中找不到该信息 => 您必须深入挖掘源代码并找出自己。
您的 IDE 可能会帮助您。我使用 Intellij,对于大多数包,IDE 能够通过它们的 typescript 定义来推断类型。
推荐阅读
- javascript - 如何在 node-imap 中获取新邮件消息的数据
- java - 在属性中存储列表的规范方法
- python - 自动从 s3 下载文件到本地
- javascript - 将谷歌表格导出为PDF时如何分页
- java - 返回对象的 JAX-WS 注释是什么
- c++ - const std::vector 有什么用?
- css - 如何使用 CSS 覆盖使用 Elementor 的幻灯片中不同图像的不同背景位置
- reactjs - 正确的图片路径
- arrays - 使用 Arrayformula 将每一行相乘
- javascript - iisnode - HRESULT:0x6d - 状态:500 - subStatus:1013