如何在容器组件中控制可观察数据

import React, { Component } from 'react';
import { Observable } from 'rxjs';

// 创建可观察数据
const observableData = new Observable((observer) => {
  // 初始化数据
  let counter = 0;

  // 定义更新数据的方法
  const updateData = () => {
    counter++;
    // 通知订阅者数据已更新
    observer.next(counter);
  };

  // 模拟异步更新数据
  setInterval(updateData, 1000);

  // 返回清理函数
  return () => {
    clearInterval(updateData);
  };
});

// 创建容器组件
class ContainerComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: 0
    };
  }

  componentDidMount() {
    // 订阅可观察数据
    this.subscription = observableData.subscribe((data) => {
      this.setState({ data });
    });
  }

  componentWillUnmount() {
    // 取消订阅可观察数据
    this.subscription.unsubscribe();
  }

  render() {
    return (
      <div>
        <h1>可观察数据: {this.state.data}</h1>
        {/* 子组件 */}
        <ChildComponent data={this.state.data} />
      </div>
    );
  }
}

// 子组件
const ChildComponent = ({ data }) => (
  <div>
    <h2>子组件: {data}</h2>
  </div>
);

export default ContainerComponent;