다른 구성 요소에서 구성 요소의 상태를 조작 할 수있는 방법이 있습니까?

4 개의 상호 관련된 구성 요소로 구성된 생태계가 있으며 한 구성 요소의 상태를 다른 구성 요소에서 조작 할 수 있다면 매우 도움이 될 것입니다.

이것은 내 MidSection 구성 요소입니다.

import React, {Component} from 'react';
import {render} from 'react-dom';
import $ from 'jquery';
import List from './List';
import OpenSessionCard from './OpenSessionCard';

class MidSection extends Component {  
  constructor() {
    super(...arguments);
    this.state = {
      cardsToBeDisplayed: this.props.sessionCards,
      cardsFilter: 'All',
      cardExpanded: false,
      cardToBeDisplayed: null
    };
  }

  filterCards() {
    let selectedValue = $('#cards-filter').val();
    if (selectedValue === 'All') {
      this.setState({
        cardsToBeDisplayed: this.props.sessionCards,
        cardsFilter: 'All',
        cardExpanded: false,
        cardToBeDisplayed: null
      });
    } else {
      this.setState({
        cardsToBeDisplayed: this.props.sessionCards.filter((sessionCard) => sessionCard.status === selectedValue),
        cardsFilter: selectedValue,
        cardExpanded: false,
        cardToBeDisplayed: null
      });
    }
  }

  render() {
    let cardList, openSessionCard;

    if (!this.state.cardToBeDisplayed) {
      cardList = (
        <List cards={this.state.cardsToBeDisplayed} filter={this.state.cardsFilter}/>
      );
    } else {
      openSessionCard = (
        <OpenSessionCard card={this.state.cardToBeDisplayed}/>
      );
    };

    return (
      <section className="col-md-8 col-sm-12 col-xs-12 middle-section-container">
          <div className="nav-justified pull-left">
              <div className="gray-background-color col-xs-12 form-control-static">
                  <div className="col-xs-6">
                      <label className="control-label green-color" htmlFor="inputError1">MY SESSIONS</label>
                  </div>
                  <div className="col-xs-2 col-xs-offset-4 text-right">
                      <select id="cards-filter" className="form-control" onChange={this.filterCards.bind(this)}>
                        <option>All</option>
                        <option>Open</option>
                        <option>Scheduled</option>
                        <option>Completed</option>
                        <option>Closed</option>
                      </select>
                  </div>
              </div>
              {cardList}
              {openSessionCard}
          </div>
      </section>
    );
  }

  componentDidMount() {
    $('#mid-section').attr('data-rendered', 'true');
  }
}

export default MidSection;

그리고 이것은 내 SessionCard 구성 요소입니다.

import React, {Component} from 'react';
import {render} from 'react-dom';
import $ from 'jquery';
import MidSection from './MidSection';

class SessionCard extends Component {
  openCard() {
    /*************
    MidSection.setState({
      cardsToBeDisplayed: null,
      cardsFilter: null,
      cardExpanded: true,
      cardToBeDisplayed: this
    });
    **************/
    $('#cards-filter').attr('disabled', 'disabled');
  }

  render() {
    return (
      <div className="card" onClick={this.openCard.bind(this)}>
        <div className="card__title green-color">{this.props.name}</div>
        <div className="card__details">
          <span>Facilitator: {this.props.facilitator}</span><br/>
          <span>Mode: {this.props.mode}</span><br/>
          <span>Status: {this.props.status}</span><br/>
        </div>
      </div>
    );
  }
}

export default SessionCard;

SessionCard 구성 요소의 openCard () 함수가 MidSection 구성 요소의 setState () 함수를 호출하기를 원합니다. 이것을 달성 할 수있는 방법이 있습니까? SessionCard 구성 요소에서 MidSection 구성 요소 (현재 상태 포함)를 어떻게 참조합니까?