filtre düğmesi sayımları

Question

Ben React:

var RightPanel = React.createClass({ 
    componentDidMount: function() { 
     this.load(); 
    }, 
    load: function(){ 

    }, 
    render: function() { 
     return (
      <div> 
       <div className="row"> 
        <div className="controls col-xs-6"> 
         <span className="title">Filters</span> 

         <FilterButton name='My jobs' count={this.props.counts.my_jobs} active={this.props.active}/> 
         <FilterButton name='Not approved' count={this.props.counts.not_approved}/> 
         <FilterButton name='Supply' count={this.props.counts.supply}/> 
         <FilterButton name='Repair' count={this.props.counts.repair}/> 
         <FilterButton name='Service exchange' count={this.props.counts.service_ex}/> 
         <FilterButton name='Urgent' count={this.props.counts.urgent}/> 
         <FilterButton name='Today' count={this.props.counts.today}/> 
         <FilterButton name='Overdue' count={this.props.counts.overdue}/> 
        </div> 
       </div> 
       <div className="controls"> 
        <span className="title">Analysis</span> 
       </div> 
      </div> 
     ) 
    } 
}); 

var FilterButton = React.createClass({ 
    render: function() { 
     return (
      <button className={'btn btn-filter btn-sm'+(this.props.active ? ' active' : '')}><span 
       className="filter-name">My jobs</span><span className="filter-count">{this.props.count}</span></button> 
     ) 
    } 
}) 

Ama doğru yolu benim düğmeleri için sayımlarda yüklemek için ne olduğunu bilmiyorum. Şu anda bunu bana söyler bir test nesnesi o tanımlanmamış tanımlamak denerseniz:

... 
load: function(){ 
    this.props.counts = [ 
     {my_jobs: 1}, 
     {not_approved: 5} 
    ] 
}, 
... 

Nasıl bu düzgün çalışması için alabilirim?

Answer 1

Sahne yerine state kullanmanız gerektiğini düşünüyorum. Yine de değiştiremeyeceğiniz immutable nesne olarak props nesnesine bakın. Size yardımcı olabilecek seçenek, varsayılan durumu size atanan getInitialState'dur.

en kodunuzu iyileştirmek edelim: Eğer onun çocuğu geçirilecek sahne kullanmak istiyorsanız

var RightPanel = React.createClass({ 
    getInitialState: function() { 
     return { 
      counts: {} 
     } 
    }, 
    componentDidMount: function() { 
     this.load(); 
    }, 
    //if you need to change state while get new props use this method 
    componentWillReceiveProps(newProps) { 
     if(newProps.counts) { 
      this.setState({ 
       counts: newProps.counts 
       }); 
     } 
    }, 
    load: function(){ 
     this.setState({ 
      counts: { 
       my_jobs: 1, 
       not_approved: 5 
      } 
     }); //in this moment your component will rerender 
    }, 
    render: function() { 
     return (
      <div> 
       <div className="row"> 
        <div className="controls col-xs-6"> 
         <span className="title">Filters</span> 

         <FilterButton name='My jobs' count={this.state.counts.my_jobs || 0} active={this.props.active}/> 
         <FilterButton name='Not approved' count={this.state.counts.not_approved || 0}/> 
        </div> 
       </div> 
       <div className="controls"> 
        <span className="title">Analysis</span> 
       </div> 
      </div> 
     ) 
    } 
}); 

Answer 2

böyle olacağını ya defaultProps kullanmalıdır.

let counts = [...]; 
<RightPanel counts={counts}/> 

componentDidMount sahne yükleyemiyor.