react组件及其传值

组件可以将UI切分成一些独立的、可复用的部件。

组件从概念上看就像是函数，它可以接收任意的参数（props），返回一个需要在页面上展示的React元素。

一、组件的定义方式

1、使用JavaScript函数

function Welcome(props) {

    return Hello, {props.name};

}

2、es6的Class类

class Welcome extends React.Component {

    render() {

        return Hello, {this.props.name};

    }

}

二、组件之间传值

    现在有两个组件，父组件Parent和子组件Children，子组件Children可以通过“props”接收Parent组件传递的值（也可以是一个方法）

代码事例：

1 父组件

// 父组件Parent

import React, { Component } from 'react';

// 引入子组件 import Children from './children';

export default class extends Component {

    // 组件的状态（数据）

    state = { number: 0 }

    onClickEvent = () => {

        console.log('onClickEvent')

        let { number } = this.state;

        this.setState({ number: number+1 })

    }

    render () {

        return (

            {/* 父组件传值给子组件可以是具体数据或是方法 */}

            <Children

                number={this.state.number}

                chilk={this.onClickEvent}

            />

        )

    }

}