reactjs - React - 親コンポーネントでイベントを処理する

Question

リスト、ボタン、テーブルなどの再利用性を促進するために、いくつかの一般的なコンポーネントを使用しています。これらのコンポーネントにはすべて、listItem、listContainer、listHead などの同じコンポーネント グループ間のすべてのプロパティを処理するために使用されるコントローラー クラスがあります。私の問題は、リストを使用してコントローラーから親コンポーネントにイベントをバブルアップする方法です。

親コンポーネント呼び出しリスト

    @inject('dataStore')
    @observer
    export class FooList extends Component {

      handleListItemClick(id) {
        console.log('Where I want to access click data!', id)
      }

      render() {
        return (
          <List
            title='Foo List'
            modeable
            data={this.dataStore.Bar}
            model={barModel}
            listItemTypesEnabled={true}
            />
        )
      }

    }

List Component (ListController の新しいインスタンスの作成)

  export class List extends Component {  

  constructor(props) {
    super(props)
    this.listController = new ListController()
    this.listController.title = props.title
    this.listController.modeable = props.modeable
    this.listController.data = props.data
    this.listController.model = props.model
    this.listController.listItemTypesEnabled = props.listItemTypesEnabled || false
    props.selectedItemId = this.listController.selectedListItemId
  }

  render() {
    return <Provider listController={this.listController}>
      <ListContainer {...this.props} />
    </Provider>
  }
}

リスト コントローラ クラス

import { observable, action, computed } from 'mobx'

export class ListController {
  @observable data
  @observable model
  @observable title
  @observable modeable
  @observable listMode = 'thin'
  @observable selectedListItemId = -1

  @action handleModeClick = (mode) => {
    this.listMode = mode

  @action handleItemClick = (itemId) => {
    console.log('clicked:', itemId)
    this.selectedListItemId = itemId //i was able to get to this part successfully
  }

親コンポーネントからクリック イベントにアクセスするにはどうすればよいですか?