React 中的类型检查

Question

我有一个多级层次结构 class A-> class B-> class C 我必须通过它传递数字。

父类就是这样的App类-

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类是App类的子类，是这样的

从'prop-types'导入propTypes； 类 Display 扩展 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类的子类是DonutChart类，是这样的

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>

        )
      }
    })

我在 React 中将此错误作为“预期数字但得到一个字符串”错误。并且数据的值没有传递给子类。这里有什么问题？

Answer 1

您想要this.props.data.size 并且您在 Donutchart 中的 propTypes 声明在您的父组件中也是错误的，您只传递了 data 而不是 this.state.data。对于您的圆环图，您可以使用stateless functional component，因为您的容器组件可以处理状态和道具，您的图表的唯一工作就是显示信息。