javascript - 学习react + es6 关于props及其传递的问题

Question

我的父组件代码

import React from 'react';
import ComponentChild from './component-child.jsx';

export default class Hello extends React.Component {
     render() {
        return  <p>
                    <h1>Hello world</h1>
                    <ComponentChild data={this.props.jsonArray} />
                </p>;
      }
}
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  <p>
                    <ul>
                        {
                            this.props.jsonArrayTest.map(function(item){
                                return <ComponentChildList key={item.id} data={item} />
                            })
                        }
                    </ul>
                </p>;
    }
}
ComponentChild.defaultProps = {
    jsonArrayTest: [
            {
                id: 1,
                val: "test1"
            },
            {
                id: 2,
                val: "test2"
            }
        ]
};     

问题:
1, 子组件报错Cannot read property 'val' of undefined
2, 父组件如何传递props覆盖子组件的默认值

Answer 1

1

export default class ComponentChildList extends React.Component {
    render() {
        return <li>{this.props.data.val}</li>;
    }
}

2

照传递过去就行，如果父组件有传递props给子组件则子组件会使用传递过来的props，否则就会使用默认的props，需要注意传递过去的props的格式（命名，键名）要和默认的一致，这样才会实现覆盖

Answer 2

楼主试下这个

export default class ComponentChildList extends React.Component {
    render() {
        return <li>{this.props.data.val}</li>;
    }
}