é«åŗ¦ćŖReactć®ref転éęč”ćę¢ę±ććęč»ć§äæå®ę§ć®é«ćć³ć³ćć¼ćć³ćAPIćę§ēÆćåå©ēØåÆč½ćŖUIč¦ē“ ćć«ć¹ćæć å „åć³ć³ćć¼ćć³ćä½ęć®å®č·µēććæć¼ć³ćå¦ć³ć¾ćć
Reactć®ref転éććæć¼ć³ļ¼ć³ć³ćć¼ćć³ćAPIčØčØććć¹ćæć¼ćć
ref転éćÆReactć®å¼·åćŖććÆćććÆć§ćć³ć³ćć¼ćć³ććéćć¦ćć®åć³ć³ćć¼ćć³ćć®äøć¤ć«refćčŖåēć«ęø”ćććØćć§ćć¾ććććć«ććć親ć³ć³ćć¼ćć³ććÆćę·±ććć¹ććććåć³ć³ćć¼ćć³ćå ć®ē¹å®ć®DOMč¦ē“ ćć³ć³ćć¼ćć³ćć¤ć³ć¹ćæć³ć¹ćØē“ę„ććåćć§ććććć«ćŖćć¾ććęč»ć§åå©ēØåÆč½ććć¤äæå®ę§ć®é«ćć³ć³ćć¼ćć³ćAPIćę§ēÆććććć«ćÆćref転éćēč§£ćå¹ęēć«ę“»ēØććććØćäøåÆę¬ ć§ćć
ć³ć³ćć¼ćć³ćAPIčØčØć«ććć¦ref転éćéč¦ćŖēē±
Reactć³ć³ćć¼ćć³ććčØčØććéćē¹ć«åå©ēØćē®ēćØććå “åćÆćä»ć®éēŗč ćć©ć®ććć«ćć®ć³ć³ćć¼ćć³ććØåÆ¾č©±ććććčę ®ććććØćéč¦ć§ććåŖććć³ć³ćć¼ćć³ćAPIćÆę¬”ć®ē¹å¾“ćęć”ć¾ćļ¼
- ē“ęēļ¼ēč§£ććććć使ććććć
- ęč»ļ¼å¤§ććŖå¤ę“ćåæ č¦ćØććć«ććć¾ćć¾ćŖć¦ć¼ć¹ć±ć¼ć¹ć«é©åæć§ććć
- äæå®åÆč½ļ¼ć³ć³ćć¼ćć³ćć®å éØå®č£ ć®å¤ę“ććććć使ēØććå¤éØć®ć³ć¼ććē “å£ććŖćć
ref転éćÆććććć®ē®ęØćéęććäøć§éč¦ćŖå½¹å²ćęććć¾ććććć«ćććć³ć³ćć¼ćć³ćć®å éØå®č£ ć«åƾććå¶å¾”ćē¶ęćć¤ć¤ćć³ć³ćć¼ćć³ćć®å éØę§é ć®ē¹å®ć®éØåćå¤éØć«å ¬éć§ćć¾ćć
React.forwardRefć®åŗę¬
Reactć«ćććref転éć®äøę øćÆćReact.forwardRefćØććé«éć³ć³ćć¼ćć³ćļ¼HOCļ¼ć§ćććć®é¢ę°ćÆć¬ć³ććŖć³ć°é¢ę°ćå¼ę°ćØćć¦åćåććref propćåćåćććØćć§ććę°ććReactć³ć³ćć¼ćć³ććčæćć¾ćć
仄äøć«ē°”åćŖä¾ć示ćć¾ćļ¼
import React, { forwardRef } from 'react';
const MyInput = forwardRef((props, ref) => {
return ;
});
export default MyInput;
ćć®ä¾ć§ćÆćMyInputćÆforwardRefć使ēØććé¢ę°ć³ć³ćć¼ćć³ćć§ććMyInputć«ęø”ćććref propćÆćē“ę„inputč¦ē“ ć«å²ćå½ć¦ććć¾ććććć«ććć親ć³ć³ćć¼ćć³ććÆå
„åćć£ć¼ć«ćć®å®éć®DOMćć¼ććøć®åē
§ćåå¾ć§ćć¾ćć
転éćććrefć®ä½æēØ
親ć³ć³ćć¼ćć³ćć§MyInputć³ć³ćć¼ćć³ćć使ēØććę¹ę³ćÆę¬”ć®ćØććć§ćļ¼
import React, { useRef, useEffect } from 'react';
import MyInput from './MyInput';
const ParentComponent = () => {
const inputRef = useRef(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
return (
);
};
export default ParentComponent;
ćć®ä¾ć§ćÆćParentComponentćÆuseRefć使ēØćć¦refćä½ęćććććMyInputć³ć³ćć¼ćć³ćć«ęø”ćć¾ććććć¦useEffectćććÆććć³ć³ćć¼ćć³ćć®ćć¦ć³ćęć«å
„åćć£ć¼ć«ćć«ćć©ć¼ć«ć¹ćå½ć¦ćććć«refć使ēØćć¾ćććććÆć親ć³ć³ćć¼ćć³ććref転éć使ēØćć¦åć³ć³ćć¼ćć³ćå
ć®DOMč¦ē“ ćē“ę„ęä½ććę¹ę³ć示ćć¦ćć¾ćć
ć³ć³ćć¼ćć³ćAPIčØčØć®ććć®äøč¬ēćŖref転éććæć¼ć³
ććć§ćÆćć³ć³ćć¼ćć³ćAPIć®čØčØćå¤§å¹ ć«ę¹åć§ćććäøč¬ēć§ä¾æå©ćŖref転éććæć¼ć³ćććć¤ćč¦ć¦ććć¾ćććć
1. DOMč¦ē“ ćøć®ref転é
äøčØć®åŗę¬ēćŖä¾ć§ē¤ŗććććć«ćDOMč¦ē“ ćøć®ref転éćÆåŗę¬ēćŖććæć¼ć³ć§ććććć«ććć親ć³ć³ćć¼ćć³ććÆć³ć³ćć¼ćć³ćå ć®ē¹å®ć®DOMćć¼ćć«ć¢ćÆć»ć¹ććęä½ććććØćć§ćć¾ćććććÆē¹ć«ä»„äøć®ē®ēć§å½¹ē«ć”ć¾ćļ¼
- ćć©ć¼ć«ć¹ē®”ēļ¼å „åćć£ć¼ć«ćććć®ä»ć®ć¤ć³ćæć©ćÆćć£ććŖč¦ē“ ć«ćć©ć¼ć«ć¹ćčØå®ććć
- č¦ē“ ć®åÆøę³ć®ęø¬å®ļ¼č¦ē“ ć®å¹ ćé«ććåå¾ććć
- č¦ē“ ć®ććććć£ćøć®ć¢ćÆć»ć¹ļ¼č¦ē“ ć®å±ę§ćčŖćæåć£ććå¤ę“ćććććć
ä¾ļ¼ć«ć¹ćæćć¤ćŗåÆč½ćŖććæć³ć³ć³ćć¼ćć³ć
ć¦ć¼ć¶ć¼ćå¤č¦³ćć«ć¹ćæćć¤ćŗć§ććććæć³ć³ć³ćć¼ćć³ććčćć¦ćæć¾ćććć
import React, { forwardRef } from 'react';
const CustomButton = forwardRef((props, ref) => {
const { children, ...rest } = props;
return (
);
});
export default CustomButton;
ććć§ć親ć³ć³ćć¼ćć³ććÆććæć³č¦ē“ ćøć®åē §ćåå¾ććććć°ć©ć ć«ćććÆćŖććÆćć¹ćæć¤ć«ć®å¤ę“ćŖć©ć®ć¢ćÆć·ć§ć³ćå®č”ć§ćć¾ćć
2. åć³ć³ćć¼ćć³ććøć®ref転é
ref転éćÆDOMč¦ē“ ć ćć«éå®ććć¾ćććä»ć®Reactć³ć³ćć¼ćć³ćć«refć転éććććØćć§ćć¾ććććć«ććć親ć³ć³ćć¼ćć³ććÆåć³ć³ćć¼ćć³ćć®ć¤ć³ć¹ćæć³ć¹ć”ć½ćććććććć£ć«ć¢ćÆć»ć¹ć§ćć¾ćć
ä¾ļ¼å¶å¾”ćććå „åć³ć³ćć¼ćć³ć
ē¬čŖć®ē¶ę ćē®”ēććć«ć¹ćæć å „åć³ć³ćć¼ćć³ćććććØćć¾ććććć°ć©ć ć§å „åå¤ććÆćŖć¢ććć”ć½ćććå ¬éćććå “åćććććććć¾ććć
import React, { useState, forwardRef, useImperativeHandle } from 'react';
const ControlledInput = forwardRef((props, ref) => {
const [value, setValue] = useState('');
const clearInput = () => {
setValue('');
};
useImperativeHandle(ref, () => ({
clear: clearInput,
}));
return (
setValue(e.target.value)}
/>
);
});
export default ControlledInput;
ćć®ä¾ć§ćÆćuseImperativeHandleć使ēØćć¦clearć”ć½ććć親ć³ć³ćć¼ćć³ćć«å
¬éćć¦ćć¾ćć親ć³ć³ćć¼ćć³ććÆćć®ć”ć½ćććå¼ć³åŗćć¦å
„åå¤ććÆćŖć¢ć§ćć¾ćć
import React, { useRef } from 'react';
import ControlledInput from './ControlledInput';
const ParentComponent = () => {
const inputRef = useRef(null);
const handleClearClick = () => {
if (inputRef.current) {
inputRef.current.clear();
}
};
return (
);
};
export default ParentComponent;
ćć®ććæć¼ć³ćÆćåć³ć³ćć¼ćć³ćć®å éØē¶ę ć«åƾććå¶å¾”ćē¶ęćć¤ć¤ćåć³ć³ćć¼ćć³ćć®ē¹å®ć®ę©č½ć親ć«å ¬éććåæ č¦ćććå “åć«ä¾æå©ć§ćć
3. č¤éćŖć³ć³ćć¼ćć³ćć®ććć®refć®ēµćæåćć
ććč¤éćŖć³ć³ćć¼ćć³ćć§ćÆćć³ć³ćć¼ćć³ćå ć®ē°ćŖćč¦ē“ ćć³ć³ćć¼ćć³ćć«č¤ę°ć®refć転éććåæ č¦ćććććććć¾ććććććÆćć«ć¹ćæć é¢ę°ć使ēØćć¦refćēµćæåćććććØć§å®ē¾ć§ćć¾ćć
ä¾ļ¼č¤ę°ć®ćć©ć¼ć«ć¹åÆč½ćŖč¦ē“ ćęć¤č¤åć³ć³ćć¼ćć³ć
å „åćć£ć¼ć«ććØććæć³ć®äø”ę¹ćå«ćć³ć³ćć¼ćć³ćććććØćć¾ćć親ć³ć³ćć¼ćć³ććå „åćć£ć¼ć«ćć¾ććÆććæć³ć®ććććć«ćć©ć¼ć«ć¹ćå½ć¦ćććććć«ććććØćć¾ćć
import React, { useRef, forwardRef, useEffect } from 'react';
const CompositeComponent = forwardRef((props, ref) => {
const inputRef = useRef(null);
const buttonRef = useRef(null);
useEffect(() => {
if (typeof ref === 'function') {
ref({
input: inputRef.current,
button: buttonRef.current,
});
} else if (ref && typeof ref === 'object') {
ref.current = {
input: inputRef.current,
button: buttonRef.current,
};
}
}, [ref]);
return (
);
});
export default CompositeComponent;
ćć®ä¾ć§ćÆćCompositeComponentćÆinputRefćØbuttonRefćØćć2ć¤ć®å
éØrefć使ēØćć¾ććććć¦useEffectćććÆććććć®refć1ć¤ć®ćŖććøć§ćÆćć«ć¾ćØćć転éćććrefć«å²ćå½ć¦ć¾ććććć«ććć親ć³ć³ćć¼ćć³ććÆå
„åćć£ć¼ć«ććØććæć³ć®äø”ę¹ć«ć¢ćÆć»ć¹ć§ćć¾ćć
import React, { useRef } from 'react';
import CompositeComponent from './CompositeComponent';
const ParentComponent = () => {
const compositeRef = useRef(null);
const handleFocusInput = () => {
if (compositeRef.current && compositeRef.current.input) {
compositeRef.current.input.focus();
}
};
const handleFocusButton = () => {
if (compositeRef.current && compositeRef.current.button) {
compositeRef.current.button.focus();
}
};
return (
);
};
export default ParentComponent;
ćć®ććæć¼ć³ćÆćč¤éćŖć³ć³ćć¼ćć³ćå ć®č¤ę°ć®č¦ē“ ćć³ć³ćć¼ćć³ćć親ć³ć³ćć¼ćć³ćć«å ¬éććåæ č¦ćććå “åć«ä¾æå©ć§ćć
4. ę”ä»¶ä»ćref転é
ē¹å®ć®ę”ä»¶äøć§ć®ćærefć転éćććå “åćććć¾ćććććÆćććć©ć«ćć®åä½ćęä¾ćć¤ć¤ć親ć³ć³ćć¼ćć³ćć«ććäøęøćć許åÆćććå “åć«ä¾æå©ć§ćć
ä¾ļ¼ćŖćć·ć§ć³ć®å „åćć£ć¼ć«ććęć¤ć³ć³ćć¼ćć³ć
ē¹å®ć®propćčØå®ććć¦ććå “åć«ć®ćæå „åćć£ć¼ć«ććć¬ć³ććŖć³ć°ććć³ć³ćć¼ćć³ćććććØćć¾ććrefćÆćå „åćć£ć¼ć«ććå®éć«ć¬ć³ććŖć³ć°ćććå “åć«ć®ćæč»¢éććććØćć¾ćć
import React, { forwardRef } from 'react';
const ConditionalInput = forwardRef((props, ref) => {
const { showInput, ...rest } = props;
if (showInput) {
return ;
} else {
return No input field;
}
});
export default ConditionalInput;
ćć®ä¾ć§ćÆćshowInput propćtrueć®å “åć«ć®ćæćrefćÆinputč¦ē“ ć«č»¢éććć¾ćććć仄å¤ć®å “åćrefćÆē”č¦ććć¾ćć
5. é«éć³ć³ćć¼ćć³ćļ¼HOCļ¼ć§ć®ref転é
é«éć³ć³ćć¼ćć³ćļ¼HOCļ¼ć使ēØććå “åćrefćć©ćććććć³ć³ćć¼ćć³ćć«ę£ćć転éćććććć«ććććØćéč¦ć§ććrefćę£ććå¦ēććŖććØć親ć³ć³ćć¼ćć³ććåŗć«ćŖćć³ć³ćć¼ćć³ćć«ć¢ćÆć»ć¹ć§ććŖććŖćåÆč½ę§ćććć¾ćć
ä¾ļ¼å¢ēē·ćčæ½å ććć·ć³ćć«ćŖHOC
import React, { forwardRef } from 'react';
const withBorder = (WrappedComponent) => {
const WithBorder = forwardRef((props, ref) => {
return (
);
});
WithBorder.displayName = `withBorder(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
return WithBorder;
};
export default withBorder;
ćć®ä¾ć§ćÆćwithBorder HOCćÆforwardRefć使ēØćć¦ćrefćć©ćććććć³ć³ćć¼ćć³ćć«ęø”ćććććØćäæčؼćć¾ććć¾ćććććć°ć容ęć«ććććć«displayNameććććć£ćčØå®ććć¦ćć¾ćć
éč¦ćŖę³Øęļ¼ćÆć©ć¹ć³ć³ćć¼ćć³ćć§HOCćØref転éć使ēØććå “åćrefćÆéåøøć®propćØćć¦ćÆć©ć¹ć³ć³ćć¼ćć³ćć«ęø”ććć¾ććthis.props.refć使ēØćć¦ć¢ćÆć»ć¹ććåæ
č¦ćććć¾ćć
ref転éć®ćć¹ććć©ćÆćć£ć¹
ref転éćå¹ęēć«ä½æēØććććć«ć仄äøć®ćć¹ććć©ćÆćć£ć¹ćčę ®ćć¦ćć ććļ¼
- refć転éććåæ
č¦ćććć³ć³ćć¼ćć³ćć«ćÆ
React.forwardRefć使ēØććććććÆReactć§ref転éćęå¹ć«ććęØęŗēćŖę¹ę³ć§ćć - ć³ć³ćć¼ćć³ćAPIćę確ć«ęęøåćććrefćä»ćć¦ć©ć®č¦ē“ ćć³ć³ćć¼ćć³ćć«ć¢ćÆć»ć¹ć§ććććć¾ććć®ä½æēØę¹ę³ćčŖ¬ęćć¾ćć
- ććć©ć¼ćć³ć¹ć«ę³Øęćććäøč¦ćŖref転éćÆćŖć¼ćć¼ććććčæ½å ććåÆč½ę§ćććććéæćć¦ćć ććć
useImperativeHandleć使ēØćć¦ćéå®ćććć”ć½ćććććććć£ć®ć»ćććå ¬éćććććć«ććć親ć³ć³ćć¼ćć³ććć¢ćÆć»ć¹ć§ćććć®ćå¶å¾”ć§ćć¾ćć- ref転éć®ä½æććććéæćććå¤ćć®å “åćć³ć³ćć¼ćć³ćéć®éäæ”ć«ćÆpropsć使ēØććę¹ćčÆćć§ćć
ć¢ćÆć»ć·ććŖćć£ć«é¢ććčę ®äŗé
ref転éć使ēØććéćÆćć¢ćÆć»ć·ććŖćć£ćčę ®ććććØćéč¦ć§ććrefć使ēØćć¦DOMč¦ē“ ćęä½ććå “åć§ććé害ćęć¤ć¦ć¼ć¶ć¼ćć³ć³ćć¼ćć³ćć«ć¢ćÆć»ć¹ć§ććććć«ćć¦ćć ććć仄äøć«ććć¤ćć®ćć³ćć示ćć¾ćļ¼
- ARIAå±ę§ć使ēØćć¦ć»ćć³ćć£ććÆćŖę å ±ćęä¾ćććććć«ćććęÆę“ęč”ćć³ć³ćć¼ćć³ćć®ē®ēćēč§£ććć®ć«å½¹ē«ć”ć¾ćć
- ćć©ć¼ć«ć¹ćę£ććē®”ēććććć©ć¼ć«ć¹ćåøøć«č¦ććē¶ę ć«ćććäŗęø¬åÆč½ć§ććććØć確čŖćć¦ćć ććć
- ęÆę“ęč”ć§ć³ć³ćć¼ćć³ćććć¹ćććććććÆćć¢ćÆć»ć·ććŖćć£ć®åé”ćē¹å®ćäæ®ę£ććććć®ęčÆć®ę¹ę³ć§ćć
å½éåćØćć¼ć«ć©ć¤ć¼ć¼ć·ć§ć³
ć°ćć¼ćć«ćŖćŖć¼ćć£ćØć³ć¹åćć«ć³ć³ćć¼ćć³ćAPIćčØčØććéćÆćå½éåļ¼i18nļ¼ćØćć¼ć«ć©ć¤ć¼ć¼ć·ć§ć³ļ¼l10nļ¼ćčę ®ćć¦ćć ćććć³ć³ćć¼ćć³ććē°ćŖćčØčŖć«ē°”åć«ēæ»čسć§ććē°ćŖćęåēęčć«é©åæć§ććććć«ćć¦ćć ććć仄äøć«ććć¤ćć®ćć³ćć示ćć¾ćļ¼
- i18nćØl10nć®ććć®ć©ć¤ćć©ćŖć使ēØććć
react-intlći18nextćŖć©ćå¤ćć®åŖććć©ć¤ćć©ćŖćå©ēØåÆč½ć§ćć - ćć¹ć¦ć®ććć¹ććå¤éØåćććć³ć³ćć¼ćć³ćå ć«ććć¹ćęååććć¼ćć³ć¼ćććŖćć§ćć ććć
- ē°ćŖćę„ä»ćØę°å¤ć®ćć©ć¼ćććććµćć¼ććććć¦ć¼ć¶ć¼ć®ćć±ć¼ć«ć«åććć¦ć³ć³ćć¼ćć³ććé©åæććć¦ćć ććć
- å³ććå·¦ļ¼RTLļ¼ćøć®ć¬ć¤ć¢ć¦ććčę ®ćććć¢ć©ćć¢čŖćććć©ć¤čŖćŖć©ćäøéØć®čØčŖćÆå³ććå·¦ć«ęøććć¾ćć
äøēäøć®ä¾
äøēäøć®ćć¾ćć¾ćŖęčć§ref転éćć©ć®ććć«ä½æēØćććććććć¤ćć®ä¾ćč¦ć¦ćæć¾ćććļ¼
- Eć³ćć¼ć¹ć¢ććŖć±ć¼ć·ć§ć³ć«ććć¦ļ¼ref転éć使ēØćć¦ćć¦ć¼ć¶ć¼ćę¤ē“¢ćć¼ćøć«ē§»åćććØćć«ę¤ē“¢å „åćć£ć¼ć«ćć«ćć©ć¼ć«ć¹ćå½ć¦ćććØćć§ććäøēäøć®č²·ćē©å®¢ć®ć¦ć¼ć¶ć¼ćØćÆć¹ććŖćØć³ć¹ćåäøććć¾ćć
- ćć¼ćæåÆč¦åć©ć¤ćć©ćŖć«ććć¦ļ¼ref転éć使ēØćć¦ććć£ć¼ććć°ć©ćć®åŗć«ćŖćDOMč¦ē“ ć«ć¢ćÆć»ć¹ććéēŗč ćå°åć®ćć¼ćæęØęŗć«åŗć„ćć¦å¤č¦³ćåä½ćć«ć¹ćæćć¤ćŗć§ććććć«ćć¾ćć
- ćć©ć¼ć ć©ć¤ćć©ćŖć«ććć¦ļ¼ref転éć使ēØćć¦ćå „åćć£ć¼ć«ćć®ćÆćŖć¢ćę¤čؼćŖć©ćććć°ć©ć ć«ććå¶å¾”ćęä¾ć§ćć¾ćććććÆćåå½ć®ćć¾ćć¾ćŖćć¼ćæćć©ć¤ćć·ć¼č¦å¶ć«ęŗę ććåæ č¦ćććć¢ććŖć±ć¼ć·ć§ć³ć§ē¹ć«å½¹ē«ć”ć¾ćć
ēµč«
ref転éćÆćęč»ć§äæå®ę§ć®é«ćReactć³ć³ćć¼ćć³ćAPIćčØčØććććć®å¼·åćŖćć¼ć«ć§ćććć®čØäŗć§čŖ¬ęććććæć¼ć³ćēč§£ćę“»ēØććććØć§ć使ććććććć¾ćć¾ćŖć¦ć¼ć¹ć±ć¼ć¹ć«é©åæć§ććå¤ę“ć«å¼·ćć³ć³ćć¼ćć³ććä½ęć§ćć¾ććć³ć³ćć¼ćć³ććčØčØććéć«ćÆćć¢ćÆć»ć·ććŖćć£ćØå½éåćčę ®ććć°ćć¼ćć«ćŖćŖć¼ćć£ćØć³ć¹ć使ēØć§ććććć«ććććØćåæććŖćć§ćć ććć
ref転éććć®ä»ć®é«åŗ¦ćŖReactć®ććÆćććÆććć¹ćæć¼ććććØć§ćććå¹ęēć§ä¾”å¤ć®ććReactéēŗč ć«ćŖćććØćć§ćć¾ććę¢ę±ććå®éØććć¹ćć«ć磨ćē¶ććäøēäøć®ć¦ć¼ć¶ć¼ćåć°ććē“ ę“ćććć¦ć¼ć¶ć¼ć¤ć³ćæć¼ćć§ć¼ć¹ćę§ēÆćć¦ćć ććć