Reactjs 反应：自定义引用（不带DOM）

几年来我一直在使用React，今天我鼓励使用一个非常独特的用例，我需要处理它。我需要做我自己的参考文献。有一些图书馆这样做，我还不知道他们是如何做的

所以基本上我需要做的是

const ref = useRef();

/**
 where ref.reset(); will work
*/

<Menu ref={ref}/>

const ref=useRef（）；
/**
其中ref.reset（）；行得通
*/

我的自定义组件：

const Menu = () => {
  const reset = () => {
   setValue(0);
  }

 return <CustomMenuComponent />
}

const Menu = React.forwardRef((props, ref) => {
  const [value, setValue] = useState(0);

  useImperativeHandle(ref, () => {
    return {
      reset: () => setValue(0)
    }
  }, []);

  return <CustomMenuComponent />
});

// Usage:
const Example = () => {
  const ref = useRef();

  useEffect(() => {
    ref.current.reset();
  }, []);

  return <Menu ref={ref} />;
}

常量菜单=（）=>{
常数重置=（）=>{
设定值（0）；
}
返回
}

所以基本上我需要在父级中公开这个方法。我知道这可以通过状态来完成，并且应该这样做，我刚刚为我的问题添加了一个最小用例。

---

因此，基本上我需要在我的组件中公开一些方法，最好使用refs。

为此，有一个很少需要的

useImperialiveHandle

hook。它允许您指定当外部组件将ref传递到函数组件时将获得什么：

const Menu = () => {
  const reset = () => {
   setValue(0);
  }

 return <CustomMenuComponent />
}

const Menu = React.forwardRef((props, ref) => {
  const [value, setValue] = useState(0);

  useImperativeHandle(ref, () => {
    return {
      reset: () => setValue(0)
    }
  }, []);

  return <CustomMenuComponent />
});

// Usage:
const Example = () => {
  const ref = useRef();

  useEffect(() => {
    ref.current.reset();
  }, []);

  return <Menu ref={ref} />;
}

const菜单=React.forwardRef（（道具，ref）=>{
const[value，setValue]=useState（0）；
使用命令式句柄（参考，（）=>{
返回{
重置：（）=>设置值（0）
}
}, []);
返回
});
//用法：
常量示例=（）=>{
const ref=useRef（）；
useffect（（）=>{
ref.current.reset（）；
}, []);
返回；
}

---

您可以查看有关此挂钩的更多信息。正如他们在文档中提到的，在可能的情况下，您应该避免使用REF，尽管您似乎意识到这一点，因为您将自己描述为拥有“一个非常独特的用例”。

为此，有一个很少需要的

UseImperializeHandle

钩子。它允许您指定当外部组件将ref传递到函数组件时将获得什么：

const Menu = () => {
  const reset = () => {
   setValue(0);
  }

 return <CustomMenuComponent />
}

const Menu = React.forwardRef((props, ref) => {
  const [value, setValue] = useState(0);

  useImperativeHandle(ref, () => {
    return {
      reset: () => setValue(0)
    }
  }, []);

  return <CustomMenuComponent />
});

// Usage:
const Example = () => {
  const ref = useRef();

  useEffect(() => {
    ref.current.reset();
  }, []);

  return <Menu ref={ref} />;
}

const菜单=React.forwardRef（（道具，ref）=>{
const[value，setValue]=useState（0）；
使用命令式句柄（参考，（）=>{
返回{
重置：（）=>设置值（0）
}
}, []);
返回
});
//用法：
常量示例=（）=>{
const ref=useRef（）；
useffect（（）=>{
ref.current.reset（）；
}, []);
返回；
}

您可以查看有关此挂钩的更多信息。正如他们在文档中提到的，在可能的情况下，您应该避免使用REF，尽管您似乎意识到这一点，因为您将自己描述为“一个非常独特的用例”。

这就是使用REF时的情况

useImperialiveHandle

自定义在使用

ref

时向父组件公开的实例值

const菜单=React.forwardRef（（道具，ref）=>{
使用命令式句柄（参考，（）=>({
重置：（）=>{
控制台日志（“重置”）；
}
}));
返回；
});
导出默认函数App（）{
const ref=useRef（）；
useffect（（）=>{
ref.current.reset（）；
}, []);
返回；
}

使用时就是这样

useImperialiveHandle

自定义在使用

ref

时向父组件公开的实例值

const菜单=React.forwardRef（（道具，ref）=>{
使用命令式句柄（参考，（）=>({
重置：（）=>{
控制台日志（“重置”）；
}
}));
返回；
});
导出默认函数App（）{
const ref=useRef（）；
useffect（（）=>{
ref.current.reset（）；
}, []);
返回；
}