前端学习-React基础1-传值

新建一个Abs.js文件, 内容如下:

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

class Abs extends Component {
    render() {
        return(
            <div>
                {this.props.abs}
            </div>
        )
    }

}
// 验证数据类型
Abs.propTypes = {
    abs: PropTypes.string,
}

export default Abs

prop-types这个包用来验证我们传值的类型是不是符合.
在Hello.js加入代码:

import React, {Component} from 'react'
import Abs from './Abs'

class Hello extends Component {
    constructor(props){
        super(props)
        this.state = {
            name: '666',
            text: 1,
        }
        this.changeName = this.changeName.bind(this)
    }
    render() {
        return(
            <div>
                Hello World! {this.state.name}
                <button onClick={this.changeName} value="React"> 点我(React) </button>
                <Abs abs={this.state.name} />
            </div>
        )
    }

    changeName(e) {
        this.setState({
            name: e.target.value,
        })
    }
}

export default Hello

入门嘛,简简单单就好!