使用键在多个项目之间插入分隔符

Question

我正在连续显示一些数据项，并用项目符号隔开，如果这些字符串不可用/不适用，有时会忽略这些字符串。

const items = [
  age !== null && `age ${age}`,
  nationality && countryName(nationality),
  /* ... */
];
return <Text>{items.filter(x=>x).join(' • ')}</Text>;

我现在想将年龄数字设为粗体，因此我用一个片段替换了数组中的字符串：

[age !== null && (<Fragment>age <Text style={styles.ageNumber}>{age}</Text></Fragment>)]

重新组装它，我不能再做join了，因为它仅适用于字符串。相反，我在字符串文字中穿插了

const intersperse = (xs, sep) => xs.flatMap((x, i) => (i > 0 ? [sep, x] : [x]));
return <Text>{intersperse(items.filter(x => x), ' • ')}</Text>;

现在我将数组传递给React，而不是将其组合到JavaScript中，我得到警告，数组中的每个孩子都需要一个键。除了通过使用索引作为键发出更多警告之外，我如何很好地处理此问题？

Answer 1

您不需要创建节点数组，而是可以使用reduce和Fragment的组合来创建最终节点，而不必担心键。

当您没有具有唯一键的数据时，此技术特别有用。

解决方案

Answer 2

如果数组中没有唯一标识符，则只需创建所选唯一索引即可。就个人而言，我会做这样的事情：

const intersperse = (xs, sep) => xs.flatMap((x, i) => (i > 0 ? [sep, x] : [x]));
return <Text key={`user-info-${Math.random()}`}>{intersperse(items.filter(x => x), ' • ')}</Text>;

自然，Math.random()不一定会为您提供唯一的号码，但在大多数情况下通常就足够了。但是，如果您要100％确保获得唯一密钥，则可以改用类似Lodash的uniqueId方法：

import { uniqueId } from 'lodash/uniqueId';

const intersperse = (xs, sep) => xs.flatMap((x, i) => (i > 0 ? [sep, x] : [x]));
return <Text key={uniqueId('user-info-')}`}>{intersperse(items.filter(x => x), ' • ')}</Text>;

希望这会有所帮助。

编辑：

如评论中所述的简单解决方案：https://jsfiddle.net/jthcys8v/1/

没有任何理由将事情添加到数组中，因为这只是使事情复杂化。我认为这是一个更清洁的解决方案。您可以对此进行扩展并调用其他方法来实际渲染Age和Nationality元素，例如

<div>
  {userInfo.age && this.renderAge()}
  {userInfo.nationality && this.renderNationality()}
</div>