状态 - state

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

前面我们给组件的数据是 props ,属性 .. 这些属性从爸爸那里传过来,也属于爸爸 .. 并且是不能变的 .. 我们可以给组件添加点交互 .. 可以在组件里添加能改变的 state .. 也就是状态 .. 状态属于组件私有的东西 .. 在组件的内部可以使用 this.state 访问到组件里的状态 ..

我们可以使用 this.setState() 这个方法去设置组件的状态 .. 如果说状态有变化了 .. 组件会重新显示它们自个儿 ..

在这个 CommentBox 组件里面,我们去向服务端请求一些数据,然后放到它的状态里 .. 添加一个 constructor ,构造函数 .. 支持一个参数 .. 名字是 props ..

constructor(props) {}

在它里面需要调用一下 super 方法 .. 再把 props 交给它 .. 然后我们可以设置一下组件的初始化的状态 .. 用一个 this.state .. 它的值是一个对象 .. 对象里添加一个叫 data 的状态 .. 它的值默认是一个空白的数组 ..

再把 data 这个状态里的数据传递给它的一个儿子 .. 这里就是 CommentList 这个组件 .. data 属性的值设置成 this.state.data ..

下面我们需要一个方法去向服务端请求点数据,然后再去设置一下 data 这个状态 .. 同样在这个 constructor 构造函数里面去请求数据 ..

可以使用 ajax 方法,这里可以使用 jquery 提供的 ajax 方法 .. 打开命令行,先去安装一下 jquery ...

jspm install jquery

完成以后,回到编辑器 .. 在文件的头部,再去导入 jquery ..

import $ from 'jquery';

回到 constructor 这个方法里面 .. $.ajax() .. 给它一个对象 .. 再去配置一下这个 ajax 方法 .. 添加一个 url ,设置一下要请求的地址 .. 这里可以使用 this.props.url ,这个属性的值是从 main.js 里的 render 方法里面传递过来的 ..

再添加一个 dataType .. 数据的类型设置成 json .. cache .. 缓存,设置成 false .. 再添加一个 success 方法 .. 请求成功以后,会把请求回来的数据交给这个方法 .. 名字可以是 comments .. 在它里面使用 this.setState .. 去设置一下组件的状态 .. 给它一个对象 .. 要设置的是 data 这个状态 .. 它的值设置成 comments ,就是使用 ajax 请求回来的数据 ..

再添加一个 error .. 处理一下请求出现的错误 .. 有三个参数 .. xhr, status, error .. 出现以后简单的把 error 输出到控制台上 ..

保存 ... 回到浏览器 .. 同样会显示一些评论的内容 .. ReactDOM.render 给 CommentBox 组件一个地址属性 .. 在 CommentBox 组件里,会用 ajax 方法去请求这个地址 .. 然后把返回来的数据交给一个叫 data 的状态 .. 然后再把这个 data 交给它的儿子 CommentList ... 这个组件接到数据以后会循环处理每条评论,并且把它们显示出来 ..

状态 - state《 React 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点