前端學習-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

入門嘛,簡簡單單就好!