5、谷粒后台用户、角色管理组件

基本布局

<Table
    bordered
    rowKey='_id'
    dataSource={roles}
    columns={this.columns}
    pagination={{ defaultPageSize: PAGE_SIZE }}
    rowSelection={{
        type: 'radio',
            selectedRowKeys: [role._id],
                onSelect: (role) => {
                    // 选择某个radio时回调
                    this.setState({
                        role
                    })
                }
    }}
    onRow={this.onRow}
    />

通过rowSelection指定表格为radio类型。onRow为点击行时的回调函数。

onRow = (role) => {
    return {
        onClick: (event) => {
            // 点击行
            console.log('row onClick()', role)
            // alert('点击行')
            this.setState({
                role
            })
        }
    }
}

树形结构

在AntD4中通过使用treeData来指定树中的数据

<Tree
      checkable
      defaultExpandAll={true}
      checkedKeys={checkedKeys}
      onCheck={this.onCheck}
      treeData={this.treeNodes}
      />

getTreeNodes = (menuList) => {
    return [{ title: '平台', key: 'all', children: menuList }]
}

得到最新状态，通过在生命周期getDerivedStateFromProps返回需要设置的状态。（componentWillReceiveProps即将废弃）

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.role !== prevState.role) {
      // 将上一个状态的值改编为点击的状态
      prevState.checkedKeys = nextProps.role.menus
      prevState.role = nextProps.role
      return {
        checkedKeys: prevState.checkedKeys
      }
    }
    return null
  }

大体思路如下：

当每次点击一行数据时，都会触发父组件onRow事件。而在这个组件中进行了重新为role对象赋值的操作。

onRow = (role) => {
    return {
        onClick: (event) => {
            // 点击行
            // console.log('row onClick()', role)
            // alert('点击行')
            this.setState({
                role
            })
        }
    }
}

因此，他也会重新将role对象传递给子组件

子组件由于具有getDerivedStateFromProps生命周期，因此每次接收到新数据都会触发该生命周期。

此时，在此生命周期就可以进行判断。当传入对象与当前state记录的对象不一致时则更新数据。将自身记录的对象替换为新传入的对象。（选中的Keys也是替换）

static getDerivedStateFromProps(nextProps, prevState) {
  // 判断传入对象与当前记录的对象是否是同一个对象
  if (nextProps.role !== prevState.role) {
    return {
      // 将刚传入的值赋值给已保存的值
      checkedKeys: nextProps.role.menus,
      role: nextProps.role
    }
  }
  return null
}