Javascript React中的打字检查

我有一个多级的层次结构，a类->B类->C类，我必须通过它传递数字

父类是如下所示的应用程序类-

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
        }

从“道具类型”导入道具类型；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
文本：0，
isClicked:错误
}
this.display=this.display.bind（this）；
}
显示（）{
var num=document.getElementById（'number'）。值；
var text=parseInt（num）；
这是我的国家({
是的，
文本：文本
})
}
render（）{
返回(
点击这里
)
}
}
App.propTypes={
text:propTypes.number，
num:propTypes.number，
数据：propTypes.number
}

Display类是App类的子类，如下所示

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

构造函数（道具）{
超级（道具）；
这个州={
num:this.props.data，//此数值未定义
数值：0
}
}
render（）{
//console.log（this.state.data）；
if（this.props.isClicked==true）{
返回（）
}否则{
返回（）
}     
}
}
显示.propTypes={
数据：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>

        )
      }
    })

从“道具类型”导入道具类型；
const DonutChart=React.createClass({
道具类型：{
数据：React.PropTypes.number，
},
getDefaultProps（）{
返回{
值：0，
尺码：116
}
},
render（）{
//log（this.props.data）；在控制台上为0
返回(
)
}
})

---

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

您想要

这个.props.data.size

并且您在Donutchart中的propTypes声明也是错误的，而且在您的父组件中，您只传递

数据

，而不是

这个.state.data

。对于油炸圈饼图，可以使用

无状态功能组件

，因为容器组件可以处理状态和道具，您的图表的唯一任务是显示信息。

您想要

这个.props.data.size

，并且您在Donutchart中的propTypes声明也是错误的，在父组件中，您只传递

数据

，而不是

这个.state.data

。对于油炸圈饼图，可以使用

无状态功能组件

，因为容器组件可以处理状态和道具，图表的唯一任务是显示信息。

为什么在DoutChart？console的propTypes中显示this.props.data.size。记录this.props并查看它包含的内容。无法读取显示类中数据的未定义属性号在

显示中定义类型时，它应该是
propTypes
而不是
propTypes
语法和逻辑错误。我建议您标记已回答的问题。为什么在DoutChart的propTypes中使用this.props.data.size？console.log this.props并查看它包含的内容。无法读取显示类中数据的未定义属性号在
propTypes
中定义类型时，它应该是
propTypes
，而不是
propTypes
逻辑错误。我建议你把这个问题的答案记下来。