javascript - 有什么方法可以从不同的组件操纵组件的状态？

Question

我有一个由 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 组件(及其当前状态)？

Answer 1

您应该只从主(父)组件设置状态。所有子组件都应该是“哑”组件。将您要调用的函数作为 SessionCard 的 Prop 传入，例如:

<OpenSessionCard card={this.state.cardToBeDisplayed} setStateFunc={this.setStateFunc}/>

然后在您的 openCard() 函数调用中:

this.props.setStateFunc();

这将调用父组件中的函数并允许您从那里操纵状态。