1. 创建一个将回调传递给设备检查的组件。
2. 使用此回调从设备检查更新容器的状态。
3. 使用容器中的状态来设置集合的props。

这在 React 中很常见，也是组合模式如何工作的基础。如果您需要在两个组件之间共享数据，只需将它们放在一个容器中并将状态提升到父组件。这些组件通常被称为容器，并且有很多关于它的文档。

这是一个很好的起点：https : //reactjs.org/docs/lifting-state-up.html

粗略的布局将是这样的。

class Container extends React.Component {
  constructor(props) {
    super(props);

    // Don't forget to bind the handler to the correct context
    this.changeDevice = this.changeDevice.bind(this);
  }

  changeDevice(device) {
    this.setState({device: device});
  }

  render() {
    return (
      <DeviceCheck btnCb={this.changeDevice} />
      <Collection device={this.state.device} />
    )
  }
}

1. 保持一个变量处于被App.js调用的状态selectedDevice。
2. 在按钮的点击处理程序中调用setState()修改selectedDevice状态。
3. 使用selectedDevice显示在相应的数据<Collection />

这是一个有点广阔你的问题，但你可以持有state与所选择的设备和使用对象setState上<DeviceCheck />点击按钮来设置选择之一。和<Collection {...selectedDevice} />将使用的状态对象作为输入。

在 App 组件中，您可以将 deviceType 作为状态和一个根据参数设置 deviceType 的函数，该函数应作为props传递给 DeviceCheck 组件。点击DeviceCheck按钮中的按钮后，需要调用对应按钮类型的prop函数作为参数。deviceType 状态应该作为 prop 传递给 Collection 组件，并且基于 prop 值，Collection 组件可以呈现相应的设备数据。希望这可以帮助！