Reactでの型チェック

Question

私は数値を渡す必要がある多レベルの階層クラスA->クラスB->クラスCを持っています。

親クラスはthis-

import propTypes from 'prop-types'; 
     class App extends React.Component{ 
      constructor(props){ 
       super(props); 
       this.state={ 
        text:0, 
        isClicked:false 
      } 
      this.display=this.display.bind(this); 
     } 
     display(){ 
     var num=document.getElementById('number').value; 
     var text=parseInt(num); 
     this.setState({ 
      isClicked:true, 
      text:text 
     }) 

     } 
     render(){ 
     return(
     <div className="row"> 
       <div className="col-md-6"> 
        <input type="text" placeholder="Enter name" value={this.state.label}/> 
        <input type="text" type='number' id='number'/> 
        <button onClick={this.display}>Click here</button> 
       </div> 
       <div className="col-md-6"> 
        <Display click={this.state.isClicked} data={this.state.text}/> 
       </div> 
       </div> 

      ) 
      } 
     } 
     App.propTypes={ 
      text:propTypes.number, 
      num:propTypes.number, 
      data:propTypes.number 
     } 

Displayクラスなどのアプリケーションクラスはアプリケーションクラスの子クラスであり、それは「プロップタイプ」から、この

輸入propTypesのようです。 クラス表示はReact.Component {

constructor(props){ 
    super(props); 
    this.state={ 
     num:this.props.data,//This value of number is coming as undefined 
     value:0 
    } 

    } 
    render(){ 
    //console.log(this.state.data); 
    if(this.props.isClicked===true){ 
     return(<DonutChart data={this.state.num}/>) 
    }else{ 
     return(<DonutChart data={this.state.value}/>) 
     }  
    } 
} 

Display.propTypes={ 
    data:propTypes.number, 
    num:propTypes.number 
} 

を拡張し、Displayクラスの子クラスがこの

import propTypes from 'prop-types'; 
const DonutChart= React.createClass({ 
     propTypes:{ 
     data:React.PropTypes.number, 
      }, 
     getDefaultProps(){ 
     return{ 
      value:0, 
      size:116 
     } 
     }, 
     render(){ 
     //console.log(this.props.data); This comes as 0 on the console 
     return(
      <svg height={this.props.size} width={this.props.size}> 

      </svg> 

     ) 
     } 
    }) 

のようなものですDonutChartクラスである私は、このエラーを取得する「予想される数が、文字列ました」というエラーがリアクト。また、データの価値が子クラスに渡されることはありません。ここでの問題は何ですか？

Answer 1

あなたがほしいと思うのは、this.state.dataの代わりにdataを渡すだけの親コンポーネントでも、DonutchartのpropTypes宣言も間違っています。あなたのドーナツチャートでは、stateless functional componentを使用することができます。なぜなら、コンテナコンポーネントは状態と小道具を処理できるからです。あなたのチャートの唯一の仕事は情報を表示することです。