私は、データ項目のリスト、データ項目からコンポーネントを構築し、項目をテーブルにフォーマットする関数を受け入れる 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
同じ値を持つ別の小道具を提供する必要があるという警告が表示されますが、これを任意のコンポーネントタイプで使用できるようにしたいので、私はしませんこれがどのように機能するかを見てください...)、代わりに何ができますか?