"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2118],{876:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>m});var r=n(2784);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=r.createContext({}),l=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=l(e.components);return r.createElement(p.Provider,{value:t},e.children)},u="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,p=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),u=l(n),d=o,m=u["".concat(p,".").concat(d)]||u[d]||f[d]||a;return n?r.createElement(m,c(c({ref:t},s),{},{components:n})):r.createElement(m,c({ref:t},s))}));function m(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,c=new Array(a);c[0]=d;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i[u]="string"==typeof e?e:o,c[1]=i;for(var l=2;l<a;l++)c[l]=n[l];return r.createElement.apply(null,c)}return r.createElement.apply(null,n)}d.displayName="MDXCreateElement"},16:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>c,default:()=>f,frontMatter:()=>a,metadata:()=>i,toc:()=>l});var r=n(7896),o=(n(2784),n(876));const a={},c="\u7ec4\u4ef6\u5b9e\u4f8b\u83b7\u53d6",i={unversionedId:"boot/ref",id:"boot/ref",title:"\u7ec4\u4ef6\u5b9e\u4f8b\u83b7\u53d6",description:"TangoBoot \u652f\u6301\u5feb\u6377\u8bbe\u7f6e\u548c\u83b7\u53d6\u7ec4\u4ef6\u7684\u5b9e\u4f8b\u3002",source:"@site/docs/boot/ref.mdx",sourceDirName:"boot",slug:"/boot/ref",permalink:"/tango/docs/boot/ref",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/boot/ref.mdx",tags:[],version:"current",frontMatter:{}},p={},l=[{value:"\u501f\u52a9 <code>withRef</code> \u6ce8\u518c\u7ec4\u4ef6\u5b9e\u4f8b",id:"\u501f\u52a9-withref-\u6ce8\u518c\u7ec4\u4ef6\u5b9e\u4f8b",level:2}],s={toc:l},u="wrapper";function f(e){let{components:t,...n}=e;return(0,o.kt)(u,(0,r.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"\u7ec4\u4ef6\u5b9e\u4f8b\u83b7\u53d6"},"\u7ec4\u4ef6\u5b9e\u4f8b\u83b7\u53d6"),(0,o.kt)("p",null,"TangoBoot \u652f\u6301\u5feb\u6377\u8bbe\u7f6e\u548c\u83b7\u53d6\u7ec4\u4ef6\u7684\u5b9e\u4f8b\u3002"),(0,o.kt)("h2",{id:"\u501f\u52a9-withref-\u6ce8\u518c\u7ec4\u4ef6\u5b9e\u4f8b"},"\u501f\u52a9 ",(0,o.kt)("inlineCode",{parentName:"h2"},"withRef")," \u6ce8\u518c\u7ec4\u4ef6\u5b9e\u4f8b"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"withRef")," \u662f TangoBoot \u5185\u7f6e\u7684\u5b9e\u4f8b\u6ce8\u518c HOC\uff0c\u53ef\u4ee5\u5feb\u6377\u7684\u8fdb\u884c\u7ec4\u4ef6\u5b9e\u4f8b\u7684\u6ce8\u518c\u548c\u83b7\u53d6\u3002\u57fa\u672c\u7684\u7528\u6cd5\u5982\u4e0b\uff1a"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"class Input extends React.Component {\n  foo() {}\n\n  render() {\n    return <input {...this.props} />;\n  }\n}\n\nconst ClassInput = withRef()(Input);\n")),(0,o.kt)("p",null,"\u501f\u52a9 ",(0,o.kt)("inlineCode",{parentName:"p"},"withRef")," \u5305\u88f9\u7ec4\u4ef6\u540e\uff0c\u5f53\u65b0\u7684\u7ec4\u4ef6\u5b9e\u4f8b\u88ab\u8bbe\u7f6e ",(0,o.kt)("inlineCode",{parentName:"p"},"id")," \u5c5e\u6027\u65f6\uff0c\u4f1a\u81ea\u52a8\u5c06\u5bf9\u5e94\u7684\u5b9e\u4f8b\u6ce8\u518c\u5230 ",(0,o.kt)("inlineCode",{parentName:"p"},"tango.refs")," \u4e2d\u3002\u4f8b\u5982\uff1a"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},'export function Basic() {\n  const inputRef = useRef();\n  useEffect(() => {\n    console.log(tango.refs.classInput, inputRef.current);\n  }, []);\n\n  // \u8bbe\u7f6e id \u5c5e\u6027\u540e\uff0c\u4f1a\u81ea\u52a8\u7ec4\u4ef6\u5b9e\u4f8b\u5230 `tango.refs` \u4e2d\n  return <ClassInput id="classInput" ref={inputRef} />;\n}\n')))}f.isMDXComponent=!0}}]);