如何显示/隐藏组件与mobX的反应

Question

我在这里遇到了一些麻烦，所以我制作简单的联系人列表，如果我点击左边的联系人列表，我想要右边的联系人卡片，也许你可以给我建议如何做到这一点，到目前为止我只是循环每个组件，我打算使onClick状态隐藏或显示组件，但我认为这不是一个好的解决方案

gere是我的代码到目前为止：

import React from 'react'
import ContactTable from './ContactList'
import ContactCard from './ContactCard'
import { observer, inject } from 'mobx-react'
import DevTools from 'mobx-react-devtools'
import styles from './contact.css'

//import Component

@inject('store') @observer
export default class Contact extends React.Component {

  componentDidMount() {
    
    this.props.store.contact.loadParent()
    
  }

  handleClick = () => {
    this.props.store.contact.selected = !this.props.store.contact.selected
  }
  
  render() {
    var data = this.props.store.contact.fetchedData
    console.log(this.props.store.contact.selected)
    return (
      <div>
        <DevTools />>
        <ContactTable data={data} onClick={this.handleClick.bind(this)} />
        {
          this.props.store.contact.selected ? <ContactCard person={data} /> : null
        }
      </div>
    )   
  }
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>