在多个项目之间插入分隔符，带键

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>;

希望这会有所帮助。

编辑：

在 cmets 中讨论的更简单的解决方案：https://jsfiddle.net/jthcys8v/1/

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

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