text表示当前行的值，record表示当前行的数据
经过测试得出以下结论：
对于要进行render 的列，如果写了对象里dataIndex这个变量，那么render的传参就按照截图中的三个参数来执行，第一个是该行对应的具体值，就是dataIndex指定的那个xxx，对应到dataSource里面对应的xxx
如：
const dataSource1 = [
{
"parentId": "0",
"_id": "1",
"name": "家用电器1",
"__v": 0,
"place":'xx1'
},
{
"parentId": "0",
"_id": "2",
"name": "家用电器2",
"__v": 0,
"place":'xx2'
},
{
"parentId": "0",
"_id": "3",
"name": "家用电器3",
"__v": 0,
"place":'xx3'
},
{
"parentId": "0",
"_id": "4",
"name": "家用电器4",
"__v": 0,
"place":'xx4'
},
];
render(){
this.columns = [
{
title: '分类名称',
dataIndex: 'place',
},
{
title: '操作',
width: 300,
dataIndex: 'name',
render: (text,category) => (//
<span>
<LinkButton>修改分类</LinkButton>
{/* 如何向事件回调函数传递参数：先定义一个匿名函数，在函数中调用处理函数，并传入数据 */}
<LinkButton onClick={()=>{this.showSubCategorys(category)}}>查看子分类</LinkButton>
</span>
)
},
];
}
//显示指定一级分类对象的二级子列表
showSubCategorys = (category) => {
// 更新状态
this.setState({
parentId:category._id,
parentName:category.name
},()=>{//在状态更新且重新render()后执行
console.log('parentId',this.state.parentId)
// 获取二级分类列表显示
this.getCategorys()
})
console.log(category);
}
起作用的是dataIndex,对于不用render的第一列来说，显示的就是dataIndex指定的DataSource里的place对应的比如xx1；
对于需要render的第二列来说，设置了onClick函数，输出的是第二个参数，也就是record，打印的是整个对象，
当然列表的从上到下顺序是DataSource数组的index顺序
{
"parentId": "0",
"_id": "1",
"name": "家用电器1",
"__v": 0,
"place":'xx1'
},
那么此时的第一个参数应该是什么呢，将text添加进render中进行查看
render: (text,category) => (//
<span>
<LinkButton>{text}</LinkButton>
{/* 如何向事件回调函数传递参数：先定义一个匿名函数，在函数中调用处理函数，并传入数据 */}
<LinkButton onClick={()=>{this.showSubCategorys(category)}}>查看子分类</LinkButton>
</span>
)
可见，text指定的是dataIndex指定的name，对应到DataSource里的name，
如果此时删掉render中的dataIndex，如果还保留三个参数，因为写了回调函数需要用到第二个record参数，所以要求该参数必须要有意义，结果便是，两个参数均是record参数对象，所以通常保留一个便是
{
title: '操作',
width: 300,
render: (text,category) => (//
<span>
<LinkButton>修改分类</LinkButton>
{/* 如何向事件回调函数传递参数：先定义一个匿名函数，在函数中调用处理函数，并传入数据 */}
<LinkButton onClick={()=>{this.showSubCategorys(text,category)}}>查看子分类</LinkButton>
</span>
)
},
//显示指定一级分类对象的二级子列表
showSubCategorys = (text,category) => {
// 更新状态
this.setState({
parentId:category._id,
parentName:category.name
},()=>{//在状态更新且重新render()后执行
console.log('parentId',this.state.parentId)
// 获取二级分类列表显示
this.getCategorys()
})
console.log(text);
console.log(category);
}
this.columns = [
{
title: '分类名称',
dataIndex: 'name',
key: 'name',
},
{
title: '操作',
width: 300,
dataIndex: 'name',//这个参数对render的传参起作用，如果不写dataIndex，那么render的第一个参数就是整行的对象
//如果写了这个参数，那么第一个text参数就是这行的值，第二个record参数才是整行的数据对象
render: (text,category) => (//
<span>
<LinkButton>修改分类</LinkButton>
{/* 如何向事件回调函数传递参数：先定义一个匿名函数，在函数中调用处理函数，并传入数据 */}
<LinkButton onClick={()=>{this.showSubCategorys(category)}}>查看子分类</LinkButton>
</span>
)
},
];
网友评论