前端学习-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

入门嘛,简简单单就好!