Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

建议：使用 useImperativeHandle hook 代替 ref callback

Aperta
#109 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Parti dall’entry point Notification.newInstance esistente e dal class-component ref callback descritto nell’issue. Confronta il flusso forwardRef/useImperativeHandle proposto e verifica che add restituisca sincronicamente una chiave, che remove la accetti e che destroy continui a smontare il container.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

背景

为了能在普通 JavaScript 函数中调用 <Notification ref={ref} /> 组件实例的方法，目前是通过 class component 的 ref callback 机制实现的，但因为依赖异步回调，导致上层 API 的使用也深受回调影响，如果可以通过某种方式同步获得组件的控制权，那么在 API 使用和封装上会变得优雅很多：

const instance = Notification.newInstance();
const key = instance.add({title: 'xxx'}); // 可以同步返回 key
instance.remove(key);

我们可以通过 useImperativeHandle hook 结合 ref 转发来实现此需求。

大致思路：
  • 使用 Function Component 改写 Notification 组件
  • Notification 组件通过 useImperativeHandle hook 和 forwardRef 暴露内部 add 和 remove 方法
  • Notification.newInstance 通过 createRef 并把 ref.current 同步返回，这样就可以实现同步调用了
const Notification = React.forwardRef((props, ref) => {
  const [notices, setNotices] = useState([]);

  const add = notice => {
    // add notice
  };

  const remove = key => {
    // remove notice
  };

  // expose add & remove methods
  useImperativeHandle(ref, () => ({
    add,
    remove,
  }));

  return (
    <div>{noticeNodes}</div>
  );
});

Notification.newInstance = function newNotificationInstance(properties) {
  const ref = React.createRef();
  // append container stuff....
  ReactDOM.render(<ToastHub {...props} ref={ref} />, div);

  return {
    notice: noticeProps => ref.current.add(noticeProps),
    removeNotice: key => ref.current.remove(key),
    component: ref.current,
    destroy() {
      ReactDOM.unmountComponentAtNode(div);
      div.parentNode.removeChild(div);
    },
  };
}
Lingua principale
TypeScript
Stelle
384
Fork
118
Merge medio
1h 18m
PR unite (30g)
2

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react-component/notification

Tutte le issue di react-component/notification

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.