新建一个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
入门嘛,简简单单就好!