在React中,forwardRef
函数用于将ref
属性转发给子组件。这样,父组件就可以直接操作子组件的ref
。
以下是使用forwardRef
的示例:
javascript
import React, { forwardRef } from 'react';
const ChildComponent = forwardRef((props, ref) => {
// 子组件的逻辑和 JSX
return <input ref={ref} />;
});
const ParentComponent = () => {
const inputRef = React.useRef();
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<ChildComponent ref={inputRef} />
<button onClick={focusInput}>Focus Input</button>
</div>
);
};