Bir bileşenin durumunu farklı bir bileşenden değiştirebilmem için herhangi bir yol var mı?

Question

4 birbiriyle ilişkili bileşenlerden oluşan bir ekosistem var ve bir bileşenin durumunu başka birinden değiştirebilirsem çok yardımcı olurum.

Bu benim Midsection bileşenidir:

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; 

Ve bu benim SessionCard bileşenidir: Ben setState() işlevini çağırmak için SessionCard bileşeninde Open Card() fonksiyonunu istiyorum

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; 

MidSection bileşeni. Bunu başarabileceğim bir yol var mı? SessionCard bileşeninden MidSection bileşenine (mevcut durumuyla) nasıl başvurabilirim?

Answer 1

Yalnızca durumu ana (ana) bileşenden ayarlamanız gerekir. Tüm çocukların bileşenleri "aptal" bileşenler olmalıdır. senin Open Card() işlev çağrısında ardından

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

Ve: Eğer gibi SessionCard bir pervane olarak çağırmak isteyen vardır işlevinde geçmek Bu ana bileşende işlevini arayacak

this.props.setStateFunc(); 

ve Durumu oradan manipüle etmenize izin verin.

Answer 2

Çok teşekkürler @ erichardson30! Çözümünüz tamamen yeterli olmasa da, beni doğru yola yönlendirdi. SetState() işlevinin bir destekleyici olarak geçirilmesi, yalnızca bağlamı geçmeden işlevi geçti (oku: çağrılması gereken bileşen). Bu yüzden, MidSection bileşeninin kendisine bir destek olarak başvurdum ve openCard() işlevinde, bileşeninin setState() işlevini kendi tanıtımı için çağırdım. Benim Midsection bileşeninde

:

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

Ve Open Card() fonksiyonunda

:

let midSectionComponent = this.props.midSectionComponent; 
midSectionComponent.setState({ 
    cardsToBeDisplayed: null, 
    cardsFilter: null, 
    cardExpanded: true, 
    cardToBeDisplayed: this 
}); 

Bu tam ben istediğim şekilde çalışıyor. Tekrar teşekkürler!