Question

我正在研究一个React组件，它接受一个数据项列表，一个从数据项构造一个组件的函数，并将这些项格式化为一个表。代码看起来像这样：

export default class DataGrid extends React.Component{
    constructor(props) {
        super(props);
        this.generateChild = item => this.props.template(item);
    }
    render () {
        return tabulate (
                  this.props.data.map(this.generateChild),
                  this.props.cols
              );
    }
}

export function tabulate (components, cols)
{
    return <table><tbody>{
              collateRows (components, cols).map(cols => 
                 <tr>{cols.map(v => 
                     <td key={keyOf(v)}>{v}</td>)
                 }</tr>)
           }</tbody></table>;
}

（其中collateRows是一个将数据值分配到行和列的2D数组中的函数）

我想知道的是，如何编写那里提到的keyOf函数：它需要生成每个项目唯一的标识符，但在同一项目的调用之间保持一致。它还需要尽可能少地了解数据项本身，因为这是一个完全通用的组件，可用于任何合理的数据类型。

我所知道的是template属性是一个返回React组件的函数，而组件具有包含适当值的属性key。但是我似乎无法访问该属性（我得到undefined并且警告说我应该提供具有相同值的另一个道具，但是因为我希望能够在任何组件类型中使用它，我不知道这是如何工作的......），那么我该怎么做呢？

为通用React容器创建密钥

0 个答案: