React –向数组映射添加唯一键 [英] React – Add unique key to array map
问题描述
我想向此函数提供的返回元素添加唯一键.
I would like to add a unique key to the returned elements this function provides.
function RowList() {
const rows = [<Row0 />, <Row1 />, <Row2 />, <Row3 />];
return (
<>
{rows.map(row => (
<tr key={?}>{row}</tr>
))}
</>
);
}
我尝试过:
function Rows() {
const rows = [<Row0 />, <Row1 />, <Row2 />, <Row3 />];
return (
<>
{rows.map(row => (
<tr key={row}>{row}</tr>
))}
</>
);
}
但是返回[object Object]
作为密钥.
我也将不能执行类似
let x = 0
function Rows() {
const rows = [<Row0 />, <Row1 />, <Row2 />, <Row3 />];
return (
<>
{rows.map(row => (
<tr key={x = x + 1}>{row}</tr>
))}
</>
);
}
因为我将需要在以后删除并添加回阵列.
As I will need to be able to remove and add back to the array later.
推荐答案
您知道,您不能只是这样做:
As you know, you can't just do this:
// DON'T DO THIS
{rows.map((row, index) => (
<tr key={index}>{row}</tr>
))}
如文档所述,这是最后的选择"并且实际上仅对静态列表有用.您说过您的列表不会是静态的.
As the documentation says, that's a "last resort" and really only useful for static lists. You've said your list won't be static.
具有这样已经创建的元素数组而不是元素的 data 数组是非常不寻常的.如果可以避免,我会给数据条目以持久的ID值,您可以将其用作键,例如(name
显然是实际数据的替代物):
It's fairly unusual to have an array of already-created elements like that rather than an array of the data for the elements. If you can avoid it, I would, and give the data entries enduring ID values that you can use as keys, e.g. (name
is obviously a stand-in for actual data):
class RowInfo {
static id = 0;
constructor(name) {
this.name = name;
this.id = RowInfo.id++;
}
}
function RowList() {
const rows = [new RowInfo("one"), new RowInfo("two"), new RowInfo("three"), new RowInfo("four")];
return (
<>
{rows.map(({id, name}) => (
<tr key={id}><Row name={name}/></tr>
))}
</>
);
}
当然,它们都应该是同一类型的组件,但这可能不是正确的.
That assumes that they should all be the same type of component, of course, which may not be true.
如果您不能这样做并且必须预先创建实际的元素,则可能会创建包装对象:
If you can't do that and must pre-create the actual elements, I'd probably create wrapper objects:
class RowInfo {
static id = 0;
constructor(element) {
this.element = element;
this.id = RowInfo.id++;
}
}
function RowList() {
const rows = [new RowInfo(<Row0 />), new RowInfo(<Row1 />), new RowInfo(<Row2 />), new RowInfo(<Row3 />)];
return (
<>
{rows.map(({id, element}) => (
<tr key={id}>{element}</tr>
))}
</>
);
}
或者如果它们没有您需要指定的任何道具,您可以让React跟踪它们,因为这是其工作的一部分:
Or if they don't have any props you need to specify, you can let React keep track of them, as that's part of its job:
class RowInfo {
static id = 0;
constructor(Comp) {
this.Comp = Comp;
this.id = RowInfo.id++;
}
}
function RowList() {
const rows = [new RowInfo(Row0), new RowInfo(Row1), new RowInfo(Row2), new RowInfo(Row3)];
return (
<>
{rows.map(({id, Comp}) => (
<tr key={id}><Comp/></tr>
))}
</>
);
}
这是一个生动的例子:
const Row0 = () => <div>Row 0</div>;
const Row1 = () => <div>Row 1</div>;
const Row2 = () => <div>Row 2</div>;
const Row3 = () => <div>Row 3</div>;
const {Fragment} = React;
class RowInfo {
static id = 0;
constructor(Comp) {
this.Comp = Comp;
this.id = RowInfo.id++;
}
}
// Have to use <Fragment></Fragment> in the below instead of <></> because
// Stack Snippet's version of Babel is out of date and
// doesn't understand <></>.
function RowList() {
const rows = [new RowInfo(Row0), new RowInfo(Row1), new RowInfo(Row2), new RowInfo(Row3)];
return (
<Fragment>
{rows.map(({id, Comp}) => (
<tr key={id}><Comp/></tr>
))}
</Fragment>
);
}
ReactDOM.render(<RowList/>, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
这篇关于React –向数组映射添加唯一键的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!