我的父组件代码
import React from 'react';
import ComponentChild from './component-child.jsx';
export default class Hello extends React.Component {
render() {
return <div>
<h1>Hello world</h1>
<ComponentChild data={this.props.jsonArray} />
</div>;
}
}
Hello.defaultProps = {
jsonArray: [
{
id: 3,
val: "test3"
},
{
id: 4,
val: "test4"
}
]
};
我的子组件代码
import React from 'react';
//item
export default class ComponentChildList extends React.Component {
render() {
return <li>{this.props.jsonArrayTest.val}</li>;
}
}
export default class ComponentChild extends React.Component {
constructor(props) {
super(props);
this.state = {
example: 'example',
};
}
render() {
return <div>
<ul>
{
this.props.jsonArrayTest.map(function(item){
return <ComponentChildList key={item.id} data={item} />
})
}
</ul>
</div>;
}
}
ComponentChild.defaultProps = {
jsonArrayTest: [
{
id: 1,
val: "test1"
},
{
id: 2,
val: "test2"
}
]
};
问题:
1, 子组件报错Cannot read property 'val' of undefined
2, 父组件如何传递props覆盖子组件的默认值
楼主试下这个
export default class ComponentChildList extends React.Component {
render() {
return <li>{this.props.data.val}</li>;
}
}
1
export default class ComponentChildList extends React.Component {
render() {
return <li>{this.props.data.val}</li>;
}
}
2
照传递过去就行,如果父组件有传递props给子组件则子组件会使用传递过来的props,否则就会使用默认的props,需要注意传递过去的props的格式(命名,键名)要和默认的一致,这样才会实现覆盖