React的props的使用和state状态
一、state状态
每个组件可以拥有自己的data数据,并且这个数据是自己独享
在react中我们需要使用state(状态)来表示我们每一个组件自己的data数据
在react中state需要在构造函数中进行设置 类似于vue中data data() {}
例如：
// react中state状态设置
//等同于构造函数
constrcutor(props) {
super(props) // 超类
this.state={
// data数据
}
}
//以上是固定写法
function demo(){
var a = 123
var b = 456
var obj ={
fn:function(){
console.log(123);
}
}
}
const test = new demo()
//这里new 就相当于构造出来一个函数我们可以通过原型链上添加我们想要用的值
//下面我们就打印一下test
我们可以在Prototype中添加我们想要的状态，同时 我们需要使用this.state.属性名 来获取 state里边设置的data数据
//我们先创建一个类组件
<script type="text/babel">
var num=123
class Child extends React.Component{
//constructor构造一个函数
constructor(props) {
super(props)
this.state={
num: 456,
stus: {
name: '张三',
age: 15,
sex: '男',
score: 98
},
arr: ['标题一','标题二','标题三'],
bool: false
}
}
render() {
return(
<div className="child">
child--{num}--{this.state.num} //第一个num指的是外部变量 第二个指的使构造函数中的num
<p>姓名: {this.state.stus.name}</p>//姓名：张三
<p>性别: {this.state.stus.sex}</p>//性别：男
<p>{this.state.arr[0]}</p>//标题一
<p style={{display: this.state.bool?'block':'none'}}>这是一段文本内容</p>//运用css样式加上this.state.boll的结果使标签隐藏或展示
</div>
)
}
}
</script>
1.1使用react实现评论的隐藏与显示
//挂载区域
<div id="app"></div>
<script type="text/babel">
class Discuss extends React.Component{
render() {
return(
<div className="discuss">
评论
<Ipt></Ipt>
<Lists></Lists>
</div>
)
}
}
//输入框组件的创建
class Ipt extends React.Component{
render() {
return(
<div className="ipt">
<textarea placeholder="请输入评论的内容"></textarea>
<button>发表评论</button>
</div>
)
}
}
//列表组建的创建
class Lists extends React.Component{
constructor(props) {
super(props)
this.state={
items: ['内容一','内容二','内容三']
}
}
render() {
return(
<React.Fragment>
//这里通过items数组的长度来表示显示与隐藏
<ul className="lists" style={{display: this.state.items.length>0?'block':'none'}}>
<li>{this.state.items[0]}</li>
<li>{this.state.items[1]}</li>
<li>{this.state.items[2]}</li>
</ul>
<p style={{display: this.state.items.length==0?'block':'none'}}>暂无内容</p>
</React.Fragment>
)
}
}
ReactDOM.render(
<Discuss/>,
document.getElementById('app')
)
</script>
1.2react计时器写法
<div id="app">
</div>
<script type="text/babel">
class Clock extends React.Component{
constructor(props){
super(props)
this.state={
data:new Date().toLocaleTimeString()
//把当前时间以字符串的形式进行显示
}
}
//react的挂载区域相当于vue中的mouted
componentDidMount() {
setInterval(()=>{
this.tick()
},1000)
}
//定义事件改变state中的值使其重新渲染页面
tick(){
//改变steState的方法
this.setState({
data:new Date().toLocaleTimeString()
})
}
render(){
return(
<div>
{this.state.data}
</div>
)
}
}
ReactDOM.render(
<Clock/>,
document.querySelector("#app")
)
</script>
props的使用
react中组件之间的关系就两种
父子
非父子
props可以作为在react中父组件向子组件传值的一种形式
父子通信的步骤(重点)：
1 在父组件中找到子组件标签 在子组件标签上边写上自定义属性名等于要传递的数据
<子组件标签名 自定义属性名=“要传递的数据”></子组件标签名>
2 在子组件的模板中 通过this.props.自定义属性名 来获取父组件向子组件传递的数据
{this.props.自定义属性名}
state与props关系区别
1 state你可以认为是用来设置组件的data数据
props是进行组件传值的
2 props是不可变的 但是state可以根据与用户的交互进行动态改变
我们需要通过state来更新或者修改数据
而子组件只能通过props来获取传递的数据
1、react封装的组件 是独立存在的 即便是同一个组件 被多次调用 但是之间保持独立的关系
注意：
react自定义组件标签中不能直接写内容 写了也不显示
如果想要react组件标签中写的内容显示出来 我们需要给自定义的组件模板中使用 this.props.children
例如：
<自定义组件标签名>内容</自定义组件标签名>
// 内容可以是任意数据
自定义组件的模板中使用 this.props.children
return(
<div>{this.props.children}</div>
)
子组件创建
class Child extends React.Component{
render() {
return(
<div className="child">
{this.props.children}
{this.props.name}
{this.props.text}
{this.props.play}
</div>
)
}
}
父组件创建
class Parent extends React.Component{
render() {
return(
<div className="parent">
parent--{this.state.msg}
<Child>
<div className="demo">demo测试</div>
</Child>
<Child name="张三" />
<Child name="李四" text="你好"/>
<Child name="王五" play="王者荣耀"/>
<Child name="马六"></Child>
</div>
)
}
}
结果显示如下
