Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

建议：使用 useImperativeHandle hook 代替 ref callback

Đang mở
  • Có gì không ổn?
#109 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu từ entry point Notification.newInstance hiện có và class-component ref callback được mô tả trong issue. So sánh flow forwardRef/useImperativeHandle được đề xuất và xác minh rằng add trả về một key một cách đồng bộ, remove chấp nhận key đó, và destroy vẫn unmount container.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

背景

为了能在普通 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);
    },
  };
}
Ngôn ngữ chính
TypeScript
Star
384
Fork
121
Merge trung bình
1 giờ 31 phút
Pull request đã merge (30 ngày)
4

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react-component/notification

Tất cả issue của react-component/notification

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.