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}

            />

        )

    }

}

推荐阅读更多精彩内容

  • 以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性...
    科研者阅读 5,373评论 2 21
  • 目前,react组件有三种写法,分别是es5的createClass写法,es6的class写法,以及statel...
    ZoomFunc阅读 566评论 0 1
  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 3,156评论 0 9
  • 最近看了一本关于学习方法论的书,强调了记笔记和坚持的重要性。这几天也刚好在学习React,所以我打算每天坚持一篇R...
    gaoer1938阅读 706评论 0 5
  • 关于JSX 考虑这样一段代码:const element = Hello, world! ;这段代码既不是字符串...
    带三本书阅读 76评论 0 1