Statik bileşenleri React ile oluşturma ve paylaşma?

Question

Tek bir bileşen oluşturmak ve farklı bileşenlere dahil etmek istiyorum. Statik bileşen güncellendiğinde, içerdiği tüm bileşenlerde güncellenmelidir. Bunu nasıl başarabilirim? senin örneğin kodunda

var ActiveTag = React.createClass({ 
    getInitialState() { return {tag: ''}, 
    render() { return <span>{this.state.tag}</span> }} 
}); 

var PanelTitle = React.createClass({ render() { return <ActiveTag/> } }) 
var DocumentTitle = React.createClass({ render() { return <ActiveTag/> } }) 

ActiveTag.setState({tag: 'shared tag'}) // Both PanelTitle and DocumentTitle should update 

Answer 1

, aşağıdaki satır çalışmaz:

ActiveTag.setState({tag: 'shared tag'}) // Both PanelTitle and DocumentTitle should update 

Sen/bileşen dışından durumuna erişmek olmamalıdır olamaz. Durumun arkasındaki tüm fikir, bileşen için içsel olmasıdır. Bileşenin kendisinden sadece setState()'u kullanmalısınız.

Eğer doğru anlamak:

• sen (bileşen görünüşte güncellenebilir çünkü) statik olmayan bilgi içeren bir standart bileşen
• var senin bileşen ağacında farklı yerlerde kullanılır

Yani bileşen bazı props veya state (aksi hiçbir güncelleme yoktur) olması gerekir. Bileşeniniz ağacında/mağaza en üst düzeyde özel bileşenin sahne (muhtemelen tepki kök bileşeni) tanımlayın ve bu pass: sahne kullanma

: 1.

2 şekilde uygulayabilirsiniz Bileşen ağacınızdaki TÜM çocuklara sahne.
Böylelikle, destekleyici güncelleştirmeleri her zaman, tüm ağacı yeniden (verimli bir şekilde) yeniden oluşturur ve özel bileşeninizin tüm örneklerini eşzamanlı olarak günceller.

(sahte kodda) olacaktır sahne kullanılarak bir örnek:

var ActiveTag = React.createClass({ 
    render() { return <span>{this.props.tag}</span> } 
}); 

var PanelTitle = React.createClass({ 
    render() { return <ActiveTag tag={this.props.tag}/> } 
}) 
var DocumentTitle = React.createClass({ 
    render() { return <ActiveTag tag={this.props.tag}/> } 
}) 

var ReactRoot = React.createClass({ 
    getInitialState() {return { globalTag : 'initial value' }}, 
    componentDidMount() { this.setState({ globalTag: 'new value' }) }, 
    render() { 
    return (
     <PanelTitle tag={this.state.globalTag} /> 
     <DocumentTitle tag={this.state.globalTag} /> 
    } 
}) 

2. durumunu kullanarak: deposu (belki bir akış deposunda) başka bir yerde özel bileşenler güncelleştirilebilir şeyler.
Özel bileşeninizde durumu uygulayın ve depodaki değişikliklere bir olay dinleyicisi ekleyin.
Bu şekilde, depodaki (veya her nerede) güncelleştirilebilir öğeler her değiştiğinde, her bir özel bileşeninizdeki dinleyici tetiklenir, durumu günceller ve özel bileşeni yeniden oluşturur. Eğer çalıştığınız şeyi iyi çok bağlamda yapısı ve bileşen ağacın, güncellemeler sıklığı, vs vs karmaşıklığı diğer faktörlere bağlıdır edilir Bunlardan