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>
)
},
];