React Bileşenleri Arasındaki Özellikleri Paylaşma

Question

Bir bileşende sayıyı (varsayılan olarak 25) artırmak veya azaltmak için bir seçeneğe sahip React ile bir saat inşa ediyorum ve başka bir bileşende zamanlayıcıyı günceller (25:00 sayıyı artırılan veya azaltılan ne olursa olsun 25) başlıyoruz.

İki bileşenden (Oturum ve Saat) kendi işlemlerini başarıyla gerçekleştiriyorum, ancak Sayaç bileşenindeki zamanlayıcının durumunu güncellemek için sayacı nasıl alabileceğimi (Oturum bileşeni) kandırdım. Daha spesifik olarak, this.props.minutes ile boş yere hiç çalışamıyorum.

Soru: Bileşenler arasında this.state.minutes özelliğini paylaşmaya nasıl gidebilirim? Şimdiden teşekkür ederim. Hala React'ta yeni başlayan biriyim.

Oturum:

const Session = React.createClass({ 

    getInitialState: function() { 
    return { 
     minutes: 25, 
     seconds: 0 
    }; 
    }, 

    increment: function() { 
    this.setState({ minutes: this.state.minutes + 1 }); 
    }, 

    decrement: function() { 
    this.setState({ minutes: this.state.minutes - 1 }); 
    }, 

    timeToString: function(time) { 
    return time + ':00'; 
    }, 

    render: function() { 
    return (
     <section> 
     <button onClick={this.increment}>+</button> 
     <button onClick={this.decrement}>-</button> 
     {this.state.minutes} 
     <Clock/> 
     </section> 
    ); 
    } 

}); 

module.exports = Session; 

Saat:

Öyle gibi Saat'in Oturum dan halde geçmesi gerekiyor

const Clock = React.createClass({ 

    getInitialState: function() { 
    return { currentCount: 10 }; 
    }, 

    startTimer: function() { 
    var intervalId = setInterval(this.timer, 1000); 
    this.setState({ intervalId: intervalId }); 
    }, 

    pauseTimer: function() { 
    clearInterval(this.state.intervalId); 
    this.setState({ intervalId: this.state.currentCount }); 
    }, 

    timer: function() { 
    var newCount = this.state.currentCount - 1; 
    if (newCount >= 0) { 
     this.setState({ currentCount: newCount }); 
    } else { 
     clearInterval(this.state.intervalId); 
    } 
    }, 

    render: function() { 
    return (
     <section> 
     <button onClick={this.startTimer}>Start</button> 
     <button onClick={this.pauseTimer}>Pause</button> 
     {this.state.currentCount} 
     </section> 
    ); 
    } 

}); 

module.exports = Clock; 

Answer 1

:

<Clock time={this.state.minutes} /> sizin Oturum bileşeninde

Sonra 'state' artık Clock bileşeniniz için this.props.time olarak kullanılabilir. Veya yukarıdaki kodda ne diyorsanız onu kullanın.

https://facebook.github.io/react/docs/multiple-components.html

Düzenleme: başka önemli bir bağlantı

Hikayenin özü devlet sahne

İlgili Dokümanlar kullanılarak öyle yapılır çocuk bileşenine bir ebeveyn bileşeninden aşağı geçirilen olduğunu docs:

https://facebook.github.io/react/tips/communicate-between-components.html