ReactNote04：组件通信方式

组件间的通信方式

1. 父组件传递信息给子组件

先看React官网的一句话：当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

以下例子说明了父组件传递信息给子组件的方式是：在父组件的子组件中写形参的时候，React会将子组件接受到的属性转换为props对象传递给组件，所以渲染子组件的时候就可以使用props里面的数据了。函数组件同理。

import React, { Component } from 'react'
class Son extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }
    render() {
        // 为什么这里可以通过this.props取得父组件里面传来的值呢？
        const { name, age, height } = this.props;
        return (
            <div>
                <h2>{name + " " + age + " " + height}</h2>
            </div>
        )
    }
}

export default class App extends Component {
    render() {
        return (
            <div>
                <Son name="beiyep" age="18" height="1.88"></Son>
                <Son name="hala" age="188" height="1.88"></Son>
                <Son name="indexjs" age="11118" height="1.8228"></Son>
            </div>
        )
    }
}

2. 组件传递信息时的数据验证

import React, { Component } from 'react';
import PropTypes from "prop-types";

function Son(props) {
    const { name, age, height, names } = props;
    return (
        <div>
            <h2>{name + " " + age + " " + height}</h2>
            <ul>
                {
                    names.map((item, index) => {
                        return <li>{item}</li>
                    })
                }
            </ul>
        </div>
    )
}

Son.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    height: PropTypes.number,
    names: PropTypes.array
}

// 默认属性
Son.defaultProps = {
    name: "hcb",
    age: 11,
    height: 178,
    names: ["hcb", "bbxk"]
}



export default class App extends Component {
    render() {
        return (
            <div>
                <Son name="beiyep333" age="18" height="1.88" names={["aaa", "bbb", "ccc"]}></Son>
                <Son name="hala333" age="188" height="1.88" names={["aaa", "bbb", "ccc"]}></Son>
                <Son name="indexjs函数" age="11118" height="1.8228"></Son>
            </div>
        )
    }
}