は、フィルタボタン数は

Question

私が持っているリアクト：

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> 
     ) 
    } 
}) 

しかし、私は正しい方法は、私のボタンのカウントにロードすることが何であるかを知りません。テストオブジェクトを定義しようとすると、現時点では定義されていません。

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

これを正しく動作させるにはどうすればよいですか？

Answer 1

私はあなたが小道具の代わりにstateを使用する必要があると思います。とにかく変更できない不変オブジェクトとしてpropsオブジェクトを見てください。あなたを助けることができるオプションはあなたにデフォルト状態を設定するgetInitialStateを使用しています。

はのは、あなたのコードを改善してみましょう：

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

あなたはその子に渡すために小道具を使用する場合は、 それはこのようなことかdefaultPropsを使用する必要があります。

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

componentDidMountは小道具をロードできません。