首页
Javascript
Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于

react通过属于props改变子组件的状态state,利用getDerivedStateFromProps

2020年02月29日 发布 阅读(99) 作者:Jerman

什么样的场景需要从props取值,来改变state?

首先组件接收的props值 ,它是一个可读的值 ,不允许修改的,所以我们不能直接修改props

看一下下面这张图,这是基于ant.design Tree组件生成的权限设置界面,编辑的时候,需要知道当前角色的权限,然后还需要新增或删减权限(需要改变数据),所以初始的时候就需要把props映射到state了

react新的生命图期图:

getDerivedStateFromProps是一个静态函数,它不能使用this,可以用来代替componentWillReceiveProps

state变化, 每次render的时候都会调用getDerivedStateFromProps,所以使用getDerivedStateFromProps时要谨慎

具体参考代码

  1. class Update extends Component {
  2. state = {
  3. // 选择框选中,会提交生效
  4. checkedKeys: [],
  5. // 单击文案选中,不提交
  6. selectedKeys: [],
  7. };
  8. static getDerivedStateFromProps(nextProps, prevState) {
  9. // current为传为的数据,编辑时才会有
  10. const { current } = nextProps;
  11. const state = prevState;
  12. // show也是编辑的时候才会有,展示modal弹窗
  13. // checkedKeys为Tree的勾选数据
  14. if (nextProps.show) {
  15. if (!state.checkedKeys.length) {
  16. if (current) {
  17. // auth为初始的权限列表
  18. if (current.auth && current.auth.length) {
  19. state.checkedKeys = current.auth;
  20. return { ...state };
  21. }
  22. }
  23. }
  24. } else {
  25. // 关闭弹窗时,清空Tree的选择数据
  26. state.checkedKeys = [];
  27. return { ...state };
  28. }
  29. // 不改变state时,返回null,这个必须有
  30. return null;
  31. }
  32. render() {
  33. // ...省略
  34. <Tree
  35. checkable
  36. onCheck={this.onCheck}
  37. checkedKeys={this.state.checkedKeys}
  38. onSelect={this.onSelect}
  39. selectedKeys={this.state.selectedKeys}
  40. defaultExpandAll
  41. >
  42. {this.renderTreeNodes(menuList)}
  43. </Tree>
  44. // ...省略
  45. }

官方文档

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •