c0e5d5fa.6fece720.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{105:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return b})),n.d(t,"metadata",(function(){return g})),n.d(t,"rightToc",(function(){return h})),n.d(t,"default",(function(){return O}));var a=n(2),r=n(6),o=n(0),c=n.n(o),i=n(121),l=n(123),s=n(410),p=n(190);const u=[[116.465812,39.991939],[116.4712,39.996749],[116.470788,39.989426],[116.475671,40.000064],[116.46557,39.999829]];var m=()=>{const e=Object(o.useRef)(),t=Object(o.useCallback)((()=>{e.current&&e.current.setFitView()}),[]);return c.a.createElement("div",null,c.a.createElement(s.a,{layout:"inline"},c.a.createElement(s.a.Item,null,c.a.createElement(p.a,{onClick:t},"\u5730\u56fe\u89c6\u91ce\u81ea\u9002\u5e94"))),c.a.createElement("div",{style:{width:"100%",height:"400px",paddingTop:"10px"}},c.a.createElement(l.a,{ref:e,mapStyle:"amap://styles/whitesmoke"},u.map(((e,t)=>c.a.createElement(l.t,{position:e,key:t}))))))},f=n(134),d=n(124),b={title:"\u83b7\u53d6\u7ec4\u4ef6 ref"},g={unversionedId:"intro/component-ref",id:"intro/component-ref",isDocsHomePage:!1,title:"\u83b7\u53d6\u7ec4\u4ef6 ref",description:"\u5982\u679c\u4f60\u9700\u8981\u8bbf\u95ee\u5730\u56fe\u7ec4\u4ef6\u5b9e\u4f8b\u672c\u8eab\uff0c\uff08\u4f8b\u5982\u9700\u8981\u8c03\u7528map.setFitView()\u6216\u8005marker.moveAlong()\uff09\uff0c\u53ef\u4ee5\u901a\u8fc7 React \u7684 ref \u673a\u5236\u6765\u83b7\u53d6\u5230\u7ec4\u4ef6\u6240\u5bf9\u5e94\u7684\u5730\u56fe\u7ec4\u4ef6\u5b9e\u4f8b\u3002",source:"@site/docs/intro/component-ref.md",slug:"/intro/component-ref",permalink:"/amap-react/docs/intro/component-ref",version:"current",sidebar:"docs",previous:{title:"\u6e38\u4e50\u573a",permalink:"/amap-react/docs/intro/playground"},next:{title:"\u6269\u5c55\u81ea\u5b9a\u4e49\u7ec4\u4ef6",permalink:"/amap-react/docs/intro/extending"}},h=[{value:"Example",id:"example",children:[]}],y={rightToc:h};function O(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},y,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"\u5982\u679c\u4f60\u9700\u8981\u8bbf\u95ee\u5730\u56fe\u7ec4\u4ef6\u5b9e\u4f8b\u672c\u8eab\uff0c\uff08\u4f8b\u5982\u9700\u8981\u8c03\u7528",Object(i.b)("inlineCode",{parentName:"p"},"map.setFitView()"),"\u6216\u8005",Object(i.b)("inlineCode",{parentName:"p"},"marker.moveAlong()"),"\uff09\uff0c\u53ef\u4ee5\u901a\u8fc7 React \u7684 ",Object(i.b)("inlineCode",{parentName:"p"},"ref")," \u673a\u5236\u6765\u83b7\u53d6\u5230\u7ec4\u4ef6\u6240\u5bf9\u5e94\u7684\u5730\u56fe\u7ec4\u4ef6\u5b9e\u4f8b\u3002"),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{}),"const $map = useRef(); // RefObject<AMap.Map | undefined>\nconst $marker = useRef(); // RefObject<AMap.Marker | undefined>\n\nreturn (\n  <Amap ref={$map}>\n    <Marker ref={$marker} position={[...]} />\n  </Amap>\n);\n")),Object(i.b)("p",null,"\u503c\u5f97\u6ce8\u610f\u7684\u662f\uff0c\u56e0\u4e3a\u5730\u56fe\u662f\u5f02\u6b65\u6e32\u67d3\u7684\uff0c\u56e0\u6b64",Object(i.b)("inlineCode",{parentName:"p"},"ref.current"),"\u53ef\u80fd\u4e3a",Object(i.b)("inlineCode",{parentName:"p"},"undefined"),"\u3002"),Object(i.b)(f.a,{mdxType:"BrowserOnly"},(function(){return Object(i.b)(m,{mdxType:"ExampleRef"})})),Object(i.b)("p",null,Object(i.b)("a",Object(a.a)({parentName:"p"},{href:"#example"}),"Source Code")),Object(i.b)("p",null,"\u66f4\u590d\u6742\u7684\u793a\u4f8b\u8bf7\u53c2\u8003",Object(i.b)("a",Object(a.a)({parentName:"p"},{href:"https://codesandbox.io/s/guijihuifang-7l6h3"}),"\u8f68\u8ff9\u56de\u653e")),Object(i.b)("h2",{id:"example"},"Example"),Object(i.b)(d.a,{mdxType:"CodeBlock"},"import React, { useCallback, useRef } from 'react';\nimport { Amap, Marker } from '@amap/amap-react';\nimport { Form, Button } from 'antd';\n\nconst POINTS = [\n  [116.465812, 39.991939],\n  [116.4712, 39.996749],\n  [116.470788, 39.989426],\n  [116.475671, 40.000064],\n  [116.46557, 39.999829],\n];\n\nconst ExampleRef = () => {\n  const mapRef = useRef();\n  const fitView = useCallback(() => {\n    if (mapRef.current) {\n      mapRef.current.setFitView();\n    }\n  }, []);\n\n  return (\n    <div>\n      <Form layout=\"inline\">\n        <Form.Item>\n          <Button onClick={fitView}>\u5730\u56fe\u89c6\u91ce\u81ea\u9002\u5e94</Button>\n        </Form.Item>\n      </Form>\n\n      <div style={{ width: '100%', height: '400px', paddingTop: '10px' }}>\n        <Amap ref={mapRef} mapStyle=\"amap://styles/whitesmoke\">\n          {POINTS.map((p, i) => (\n            <Marker position={p} key={i} />\n          ))}\n        </Amap>\n      </div>\n    </div>\n  );\n};\n\nexport default ExampleRef;\n"))}O.isMDXComponent=!0},124:function(e,t,n){"use strict";n.d(t,"a",(function(){return i}));var a=n(0),r=n.n(a),o=n(136),c=n(415);function i(e){const[t,n]=Object(a.useState)(!1);return r.a.createElement(r.a.Fragment,null,r.a.createElement("div",{style:{marginBottom:4}},r.a.createElement("span",null,"\u67e5\u770b\u6e90\u4ee3\u7801\uff1a"),r.a.createElement(c.a,{checked:t,onChange:e=>n(e)})),t&&r.a.createElement(o.a,null,e.children))}},190:function(e,t,n){"use strict";var a=n(116),r=n.n(a),o=n(115),c=n.n(o),i=n(144),l=n.n(i),s=n(153),p=n.n(s),u=n(0),m=n(112),f=n.n(m),d=n(132),b=n(414),g=n(147),h=n.n(g),y=function e(t){return h()(this,e),new Error("unreachable case: ".concat(JSON.stringify(t)))},O=function(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(a=Object.getOwnPropertySymbols(e);r<a.length;r++)t.indexOf(a[r])<0&&Object.prototype.propertyIsEnumerable.call(e,a[r])&&(n[a[r]]=e[a[r]])}return n},v=function(e){return u.createElement(b.a,null,(function(t){var n,a=t.getPrefixCls,o=t.direction,i=e.prefixCls,l=e.size,s=e.className,p=O(e,["prefixCls","size","className"]),m=a("btn-group",i),d="";switch(l){case"large":d="lg";break;case"small":d="sm";break;case"middle":case void 0:break;default:console.warn(new y(l))}var b=f()(m,(n={},c()(n,"".concat(m,"-").concat(d),d),c()(n,"".concat(m,"-rtl"),"rtl"===o),n),s);return u.createElement("div",r()({},p,{className:b}))}))},j=n(204),k=n(174),x=n(154),E=n(140),w=n(159),C=n(164),N=n.n(C),R=function(){return{width:0,opacity:0,transform:"scale(0)"}},T=function(e){return{width:e.scrollWidth,opacity:1,transform:"scale(1)"}};function S(e){var t=e.prefixCls,n=!!e.loading;return e.existIcon?u.createElement("span",{className:"".concat(t,"-loading-icon")},u.createElement(N.a,null)):u.createElement(w.b,{visible:n,motionName:"".concat(t,"-loading-icon-motion"),removeOnLeave:!0,onAppearStart:R,onAppearActive:T,onEnterStart:R,onEnterActive:T,onLeaveStart:T,onLeaveActive:R},(function(e,n){var a=e.className,r=e.style;return u.createElement("span",{className:"".concat(t,"-loading-icon"),style:r,ref:n},u.createElement(N.a,{className:f()(a)}))}))}var A=n(156),P=function(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(a=Object.getOwnPropertySymbols(e);r<a.length;r++)t.indexOf(a[r])<0&&Object.prototype.propertyIsEnumerable.call(e,a[r])&&(n[a[r]]=e[a[r]])}return n},I=/^[\u4e00-\u9fa5]{2}$/,B=I.test.bind(I);function F(e){return"text"===e||"link"===e}function M(e,t){var n=!1,a=[];return u.Children.forEach(e,(function(e){var t=p()(e),r="string"===t||"number"===t;if(n&&r){var o=a.length-1,c=a[o];a[o]="".concat(c).concat(e)}else a.push(e);n=r})),u.Children.map(a,(function(e){return function(e,t){if(null!=e){var n=t?" ":"";return"string"!=typeof e&&"number"!=typeof e&&"string"==typeof e.type&&B(e.props.children)?Object(A.a)(e,{children:e.props.children.split("").join(n)}):"string"==typeof e?(B(e)&&(e=e.split("").join(n)),u.createElement("span",null,e)):e}}(e,t)}))}Object(k.a)("default","primary","ghost","dashed","link","text"),Object(k.a)("circle","round"),Object(k.a)("submit","button","reset");var V=function(e,t){var n,a,o=e.loading,i=e.prefixCls,s=e.type,m=e.danger,g=e.shape,h=e.size,y=e.className,O=e.children,v=e.icon,k=e.ghost,w=e.block,C=P(e,["loading","prefixCls","type","danger","shape","size","className","children","icon","ghost","block"]),N=u.useContext(E.b),R=u.useState(!!o),T=l()(R,2),A=T[0],I=T[1],V=u.useState(!1),$=l()(V,2),z=$[0],L=$[1],D=u.useContext(b.b),J=D.getPrefixCls,_=D.autoInsertSpaceInButton,X=D.direction,G=t||u.createRef(),H=u.useRef(),U=function(){return 1===u.Children.count(O)&&!v&&!F(s)};a="object"===p()(o)&&o.delay?o.delay||!0:!!o,u.useEffect((function(){clearTimeout(H.current),"number"==typeof a?H.current=window.setTimeout((function(){I(a)}),a):I(a)}),[a]),u.useEffect((function(){!function(){if(G&&G.current&&!1!==_){var e=G.current.textContent;U()&&B(e)?z||L(!0):z&&L(!1)}}()}),[G]);var W=function(t){var n=e.onClick;A||n&&n(t)};Object(x.a)(!("string"==typeof v&&v.length>2),"Button","`icon` is using ReactNode instead of string naming in v4. Please check `".concat(v,"` at https://ant.design/components/icon")),Object(x.a)(!(k&&F(s)),"Button","`link` or `text` button can't be a `ghost` button.");var q=J("btn",i),K=!1!==_,Q="";switch(h||N){case"large":Q="lg";break;case"small":Q="sm"}var Y=A?"loading":v,Z=f()(q,(n={},c()(n,"".concat(q,"-").concat(s),s),c()(n,"".concat(q,"-").concat(g),g),c()(n,"".concat(q,"-").concat(Q),Q),c()(n,"".concat(q,"-icon-only"),!O&&0!==O&&Y),c()(n,"".concat(q,"-background-ghost"),k&&!F(s)),c()(n,"".concat(q,"-loading"),A),c()(n,"".concat(q,"-two-chinese-chars"),z&&K),c()(n,"".concat(q,"-block"),w),c()(n,"".concat(q,"-dangerous"),!!m),c()(n,"".concat(q,"-rtl"),"rtl"===X),n),y),ee=v&&!A?v:u.createElement(S,{existIcon:!!v,prefixCls:q,loading:!!A}),te=O||0===O?M(O,U()&&K):null,ne=Object(d.a)(C,["htmlType","loading","navigate"]);if(void 0!==ne.href)return u.createElement("a",r()({},ne,{className:Z,onClick:W,ref:G}),ee,te);var ae=C,re=ae.htmlType,oe=P(ae,["htmlType"]),ce=u.createElement("button",r()({},Object(d.a)(oe,["loading"]),{type:re,className:Z,onClick:W,ref:G}),ee,te);return F(s)?ce:u.createElement(j.a,null,ce)},$=u.forwardRef(V);$.displayName="Button",$.defaultProps={loading:!1,ghost:!1,block:!1,htmlType:"button"},$.Group=v,$.__ANT_BUTTON=!0;var z=$;t.a=z}}]);