单击时动态渲染反应组件

Question

我需要动态渲染react组件，基本上当用户单击SubComponent时我需要运行一些逻辑并在Component中显示另一个反应组件。

怎么做？

const getViewer = (type) => {
  let node = null
  switch (type) {
    case 'image':
      node = (
        <ImageViewer/>
      )
      return node
    case 'video':
      node = (
        <VideoViewer/>
      )
      return node
    default:
      return null
  }
}

const handlerOnClick = () =>{
  // TODO
  getViewer('image')

}

export const Component = () =>
  <div className={classes.root}>
    <SubComponent onClick={handlerOnClick} />
  </div>