React组件传参，table表格的rowKey。

qq_36359324

已于 2022-04-07 10:05:46 修改

阅读量2.3k

点赞数

文章标签： react.js 前端 javascript

于 2022-04-06 18:10:32 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36359324/article/details/123865637

版权

本文详细探讨了React组件中如何正确传递props，特别是关于`{data}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.React组件传参为什么加{}，({data})

const PersonInfo = ({data,columns}) => {
    return (
        <div></div>
    )
}
//或者
const PersonInfo = (props) => {
//使用是props.data,props.columns
    return (
        <div></div>
    )
}
组件传参传入的是一个对象props

<PersonInfo data={dataArr} columns={column}/>

2.table表格必须有一个rowKey

<Tables list={data} columns={columns}/>
const Tables = ({list,columns}) => {
    return (
        <React.Fragment>
            <Table
                dataSource={list}
                columns={columns}
                //rowKey={_.uniqueId()} //使用_.uniqueId会报错
                  rowKey={(record,index)=>index}
                pagination={false}
            />
        </React.Fragment>
    )
}
// rowKey要给antd里的table,不要给自己写的
<Tables list={data} columns={columns} rowKey={_.uniqueId()}/>
//_.uniqueId()执行，rowKey现在是一个具体值了

const Tables = ({list,columns,rowKey}) => {
    return (
        <React.Fragment>
            <Table
                dataSource={list}
                columns={columns}
                //rowKey={rowKey} //rowKey是一个具体值，表格的每行列循环rowKey都是一个值报错
                rowKey={(record,index)=>index} //这样是对的，使用_.uniqueId报错
                pagination={false}
            />
        </React.Fragment>
    )
}

Table表格里的rowKey必须是一个变量，不能是一个具体值。每次Table循环的值都不能一样。