我有一个多级层次结构类 A-> 类 B-> 类 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; 类显示扩展 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 中收到此错误作为“预期数字但收到字符串”错误。并且数据的值(value)没有传递给子类。这里有什么问题?
最佳答案
你想要 this.props.data.size
并且你在 Donutchart 中的 propTypes 声明在你的父组件中也是错误的你只传递 data
而不是 这个.state.data
。对于您的圆环图,您可以使用无状态功能组件
,因为您的容器组件可以处理状态和 Prop ,您的图表的唯一工作是显示信息。
关于javascript - React 中的类型检查,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45347640/