React组件实例三大属性state props refs使用详解

发布时间:2022-9-08 09:39

这篇文章主要为大家介绍了React组件实例三大属性state props refs使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助!

一、 State

1.概念

概念:state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合),组件被称为状态机,通过更新组件的state来更新对应的页面显示(重新渲染组件),有state称为复杂组件。

2.State的简单用法

实现简单的切换效果,这里的效果是一种覆盖

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn{
width: 100px;
height: 40px;
background-color: red;
}
.on{
background-color: gray;
}
</style>
</head>
<body>
<div id="root"></div>
<!-- 引入react核心库 -->
	<script src="js/react.development.js"></script>
	<!-- 引入操作dom的扩展库 -->
	<script src="js/react-dom.development.js"></script>
	<!-- 引入babel来解析jsx语法 -->
	<script src="js/babel.min.js"></script>
<script type="text/babel">
class IsLike extends React.Component {
state = { flag:true } 
//箭头函数this指向上下文,静态不可改变
changeFlag=()=>{
this.setState({flag:!this.state.flag})
}
render() { 
const {flag}=this.state
return (
<div>
<button className={flag?'btn':'btn on'} onClick={this.changeFlag}>{flag?'喜欢':'不喜欢'}</button>
</div>
)
}
}
ReactDOM.render(<IsLike/>,document.getElementById('root'))
</script>
</body>
</html>

编辑

3.JS绑定事件

let btn = document.getElementById('btn');
btn.addEventListener('click',function(){
   alert('按钮被点击了!');
})
btn.onclick = function(){
 alert('按钮被点击了!');
}
function demo(){
alert('按钮被点击了');
}

4.react 绑定事件

render(){
return <a href='javascript:;' onClick={demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a>
}

说明:

·onclick 变为 onClick。

·{函数名}返回值给click,加()就会直接调用。

5.react this指向问题

demo(){  console.log(this);//undefined
console.log('事件被点击了');
}

举例说明:

class Person{
 constructor(name,age) {
 this.name = name;
 this.age = age;
 }
say(){
 console.log(this);
 }
 }
const p1 = new Person('张三',18);
p1.say();//p1为实例对象
const p2 = p1.say;
p2();//undefined 类采取是严格模式

6.修改state值

class MyClass extends React.Component{
constructor(props) {   
   super(props);
   this.state = {isflag:true};
   this.demo = this.demo.bind(this);
}render(){
return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a>
}
demo(){
this.setState({isflag:!this.state.isflag})
}}
 ReactDOM.render(<MyClass/>,document.getElementById('root'));

说明:

bind会生成一个新的方法 并传对象 改变this的指向必须使用setState 修改才有效,修改内容为合并。有值得修改没有的不动

7.代码简写

class MyClass extends React.Component{
state = {isflag:true}
render(){
return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a>
}
 demo = () => {
this.setState({isflag:!this.state.isflag})
 }
}
ReactDOM.render(<MyClass/>,document.getElementById('root'));

说明:

类中的属性直接赋值,省去构造函数。

自定义方法—用赋值语句的形式+箭头函数

二、props

1.概念

每个组件对象都会有props(properties的简写)属性。

组件标签的所有属性都保存在props中。

props 是不可变的,只能通过 props 来传递数据。

2.传参的基础方法、运算符传参

其中先通过let创建了一个对象,在通过三点运算符,来遍历得到,对象里面的值

在通过对象结构得到props中的realname和age,GetName是Person组件的子组件,在Person中传值给GetName,GetName通过props接收

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<!-- 引入react核心库 -->
	<script src="js/react.development.js"></script>
	<!-- 引入操作dom的扩展库 -->
	<script src="js/react-dom.development.js"></script>
	<!-- 引入babel来解析jsx语法 -->
	<script src="js/babel.min.js"></script>
<script type="text/babel">
class GetName extends React.Component {
render() { 
return (
<div>姓名:{this.props.realname}</div>
);
}
}
class Person extends React.Component {
render() { 
const {realname,age} = this.props
return (
<div>
<GetName realname={this.props.realname}/>
<span>年龄:{age}</span>
</div>
);
}
}
let p1 = {realname:'张三',age:19}
ReactDOM.render(<Person {...p1}/>,document.getElementById('root'))  
</script>
</body>
</html>

三、refs

定义

组件内的标签可以定义ref来标识自己。

字符串形式的ref、回调函数下ref、createRef 创建ref容器

字符串形势,是直接通过ref绑定值,通过在点击事件中获取ref的值,ref如同把整个input表单传了过来,在获取值的时候需要点一下value来获取的是input表单的内容

通过ref中的箭头函数,绑定了值,在方法中直接获取即可,穿过来时,由于react的编译不需要写target但是,还是需要点出value

通过createRef来创建两个容器,通过对象的形势与ref绑定,直接就可以在方法中得到值,不过这里要注意,打印还是获取的时候在点value之前点一个current,如this.realname.current.value

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<!-- 引入react核心库 -->
	<script src="js/react.development.js"></script>
	<!-- 引入操作dom的扩展库 -->
	<script src="js/react-dom.development.js"></script>
	<!-- 引入babel来解析jsx语法 -->
	<script src="js/babel.min.js"></script>
<script type="text/babel">
class Person extends React.Component {
//createRef 创建ref容器
realname = React.createRef()
age  = React.createRef()
ShowInfo=()=>{
//字符串
// const {realname,age}=this.refs
// console.log(`姓名:${realname.value}年龄:${age.value}`); 
//回调函数
// let realname = this.realname.value
// let age  = this.age.value
// console.log(`姓名:${realname}年龄:${age}`);
//类绑定
console.log(this.realname.current.value);
console.log(this.age.current.value);
}
render() { 
return (
/*字符串形势
<div>
<p><input type="text" placeholder="请输入姓名" ref='realname'/></p>
<p><input type="text" placeholder="年龄" ref='age'/></p>
<p><button onClick={this.ShowInfo}>提交</button></p>
</div>
*/
//回调函数
// <div>
//<p><input type="text" placeholder="请输入姓名" ref={e=>this.realname=e}/></p>
//<p><input type="text" placeholder="年龄" ref={e=>this.age=e}/></p>
//<p><button onClick={this.ShowInfo}>提交</button></p>
// </div>
//createRef 创建ref容器
<div>
   <p><input type="text" placeholder="请输入姓名" ref={this.realname}/></p>
   <p><input type="text" placeholder="年龄" ref={this.age}/></p>
   <p><button onClick={this.ShowInfo}>提交</button></p>
</div>
);
}
}
ReactDOM.render(<Person/>,document.getElementById('root')) 
</script>
</body>
</html>
React Context与setState详解使用方法 网站建设

React Context与setState详解使用方法

React对于需要插槽的情况非常灵活,有两种方案可以实现:组件的children子元素和props属性传递React元素。 children实现插槽 每个组件都可以获取到 props.childr...