父组件
class SendTask extends Component {
render() {
var search = dataSearch.map(function (item, index) {
if (item.type === 'input'){
return <InputBox key={item.key} curItem={item}/>
}else if(item.type === 'select'){
return <InputSelector key={item.key} curItem={item}/>
}else {
return <RangePicker key={item.key}/>
}
},this);
return(
<div className="condition">
{search}
</div>
);
}
}
子组件
class InputBox extends Component {
render() {
var curItem = this.props.curItem;
console.log(curItem);
return(
<div className="input-box">
<span>{this.props.curItem.title}</span>
<input type="text" placeholder={this.props.curItem.placeholder} id={this.props.curItem.id}/>
</div>
);
}
}
如何能够在子组件中通过this.props.curItem.title访问对应的属性,
看了很多博客,上面写的类似于这种父组件向子组件传值的,都是传的简单的字符串类型,在子组件中可以直接打印,直接使用,
像我这种传的对象,在子组件中如果直接打印对象是没有问题的,也就是console.log(this.props.curItem);
如果打印console.log(this.props.curItem.title);
就会报一个 Uncaught TypeError: Cannot read property ‘title’ of undefined 这样的错,是不能直接传对象给子组件吗?求解