有关React基础知识及组件相关知识,请移步React框架简介(JSX语法、组件、虚拟DOM渲染)
既然React组件可以通过JavaScript函数方式实现, 那么React组件就可以接受参数的传入。React框架定义了一个Props的概念, 专门用来实现React函数组件接受参数的输入。
1、每个组件都有props属性;
2、组件的属性值都保存在props中;
3、通过props可以在组件外部向组件内部传递参数;
4、在组件内部不能修改props属性的值(因为它是从外部传进去的,如果要修改就从传的地方进行修改)——props属性的只读属性
5、在组件内部读取某个属性的值:this.props.属性名
6、类组件的构造函数:
constructor(props){
super(props)
console.log(props) //输出组件的所有属性
}
7、设置props的默认值:
组件名.defaultProps={
属性名:值,
属性名:值
}
8、属性值的类型和必要性限制:
(1)在组件外部定义时:
组件名.propTypes={
属性名:React.PropTypes.数据类型.必要性(isRequired)
}
(2)在组件内部定义时:
static propTypes={
属性名:PropTypes.数据类型.必要性(isRequired)
}
例:
函数组件:
<div id="fn"></div>
<script type="text/babel">
function FnProps(props){
if(props){
return <h2>你好,{props.name}</h2>
}
}
FnProps.defaultProps={
name:'皮皮虾'
}
// ReactDOM.render( ,document.getElementById('fn')) //你好,小张
ReactDOM.render(<FnProps/>,document.getElementById('fn')) //没有给props传值,渲染的是默认值,你好,皮皮虾
</script>
类组件:
class ClaProps extends React.Component{
constructor(props){
super(props)
console.log(props)
}
// static propTypes={ //在组件内部 设置属性的数据类型和必要性
// name:PropTypes.string.isRequired, //设置name为字符串类型
// }
render(){
return (
<h2>
你好,{this.props.name}
</h2>
)
}
}
ClaProps.propTypes={ //在组件外部定义设置属性的数据类型和必要性
name:PropTypes.string.isRequired
}
ClaProps.defaultProps={
name:'大蚊子'
}
// ReactDOM.render( ,document.getElementById('class')) //你好,小文
ReactDOM.render(<ClaProps/>,document.getElementById('class')) //你好,大蚊子
//const props={name:"小文"} //定义一个props对象(当有多个参数需要传递时)
//使用扩展运算符...传入整个props对象
//ReactDOM.render( ,document.getElementById('class'))
1、是组件的状态机,通过更新组件的state属性来刷新组件(对组件进行重新渲染);
2、每个组件都有state,它的值是对象类型;
3、组件state属性的初始化放在构造方法中;
4、状态值的读取:this.state.statePropertName
5、状态值的更新:
this.setState({
statePropertName1:值,
statePropertName2:值
})
6、根据组件有无state属性可以将组件分为:有状态组件和无状态组件。
有state属性的组件叫做有状态组件,没有state的组件是无状态组件
<div id="state"></div>
<script type="text/babel">
class StateDemo extends React.Component{
constructor(props){
super(props)
this.state={
name:'小张'
}
//this.handleClick=this.handleClick.bind(this)
}
//handleClick(){
//this.setState({
//name:'文子'
//})
// }
handleClick=()=>{ //自定义 箭头函数,不用绑定this
this.setState({
name:'文子'
})
}
render(){
return (
<h2 onClick={this.handleClick}>我是{this.state.name}</h2>
)
}
}
ReactDOM.render(<StateDemo/>,document.getElementById('state'))
</script>
(1)state
:状态机,组件自身的可以变化的数据
(2)props
:从组件外部向组件传递的数据,在组件内部对props只能读不能修改。在组件外部传值时修改。
1、refs是弹性文件系统。在React中可以通过该特性获取DOM或react元素
2、如何使用:
(1)通过createRef()方法创建
可以直接获取html元素:将html元素与ref进行绑定(给标签添加ref属性,ref属性值就是createRef方法创建的对象)
获取组件类的实例:可以直接和组件类的实例进行绑定
(2)回调refs(3)通过绑定字符串(String类型的refs)(4)使用useRef
例1:获取虚拟DOM标签的值:有三种方式
class RefComponent extends React.Component{
constructor(props){
super(props)
// this.showInput=this.showInput.bind(this) //绑定this的第一种方法
}
showInput(){
const inputVal=this.refs.content.value//获取到文本框输入的值,这里的this需要绑定才能起作用
alert(inputVal) //----------第一种
//alert(this.input.value) //----------第二种
}
handleBlur(event){ //event是事件发生的对象
alert(event.target.value) //----------第三种 显示的是失去焦点时输入框里面的值
}
render(){
return (
<div>
<input type="text" ref="content"/> //第一种
//this.input=info}/> //第二种 info代表控件里面输入的值
//
<button onclick={this.showInput.bind(this)}></button> //绑定this的第二种方法
<input type="text" placeholder="失去焦点测试" onBlur={this.handleBlur}/> //第三种
</div>
)
}
}
ReactDOM.render(<RefComponent/>,document.getElementById('test'))
在这个例子里,我们学到了三种获取DOM元素值的方法以及两种函数绑定this的方法。
例2:使用createRef()创建Ref
class RefComponent extends React.Component{
constructor(props){
super(props)
this.myRef=React.createRef() //使用react创建一个refs
console.log(this.myRef)
}
componentDidMount(){
this.myRef.current.innerHtml="西柚"
}
render(){
return (
<div>
<div ref={this.myRef}></div>
</div>
)
}
}
ReactDOM.render(<RefComponent/>,document.getElementById('app'))