Question

我正在创建一个在React和Electron中的应用程序。我正在尝试创建一个组件，打开三个TCP套接字并在它们全部连接时呈现子项。它大致如下（简化）：

export class Device extends Component {
  static propTypes = {
    port: PropTypes.number.isRequired,
    host: PropTypes.string.isRequired
  };
  render() {
    const { port, host, children } = this.props;
    return (
      <div className="device-mount">
        <TCPSocket name="commands" port={port} host={host} />
        <TCPSocket name="messages" port={port} host={host} />
        <TCPSocket name="routines" port={port} host={host} />
        {children}
      </div>
    );
  }
}

TCP套接字将在CONNECT_ATTEMPT，componentDidMount成功连接后发送CONNECTED事件，并在关闭时发送DISCONNECTED。

我找到了一个不洁净的＆＃34;解决方案是简单地创建一个连接事件，该事件将使用单个组件并触发所有事件本身，然后在它们全部连接后绑定.then处理程序。然而，这似乎不是很好的做法，因为它不是模块化的。

我的目标是在所有这些TCPSocket组件触发其CONNECTED事件时通知父组件。首先想到的是child context，但实际上，我希望反方向。

如何通知父组件有关多个子组件的状态？

Answer 1

给每个回调他将使用它的名称和状态调用：

export class Device extends Component {
  static propTypes = {
    port: PropTypes.number.isRequired,
    host: PropTypes.string.isRequired
  };

  constructor(props, context) {
      super(props, context);

      this.getTCPSocketStatus = this.getTCPSocketStatus.bind(this);
  }

  getTCPSocketStatus(name, status) {
      // whatever you want to do with the status
  }
  render() {
    const { port, host, children } = this.props;
    return (
      <div className="device-mount">
        <TCPSocket name="commands" port={port} host={host} notifyStatus={ getTCPSocketStatus } />
        <TCPSocket name="messages" port={port} host={host} notifyStatus={ getTCPSocketStatus } />
        <TCPSocket name="routines" port={port} host={host} notifyStatus={ getTCPSocketStatus } />
        {children}
      </div>
    );
  }
}

然后每个孩子都应该使用回调，例如：

class TCPSocket extends Component {
    componentDidMount() {
        const { notifyStatus, name } = this.props;
        this.props.notifyStatus(name, 'CONNECT_ATTEMPT');
    }

    // implement other status notifications in the same way
}

通知父组件子连接状态

1 个答案: