使用rxjs更新react函数式无状态组件的属性

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

const prop$ = new Observable((observer) => {
  // 在这里监听属性的变化
  // 例如，使用fromEvent监听input元素的变化
  const input = document.getElementById('input');
  const input$ = fromEvent(input, 'input');
  
  input$.subscribe((event) => {
    observer.next(event.target.value);
  });
});

const MyComponent = () => {
  const [prop, setProp] = useState('');

  useEffect(() => {
    const subscription = prop$.pipe(
      map((value) => {
        // 在这里对属性进行处理
        return value.toUpperCase();
      })
    ).subscribe((value) => {
      setProp(value);
    });

    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return (
    <div>
      <input id="input" type="text" />
      <p>{prop}</p>
    </div>
  );
};