React.Children.map 中的 React.cloneElement 导致元素键发生变化

Question

正如标题所述，在 React.Children.map 内使用 React.cloneElement 会导致元素键发生变化。

这里有一个sandbox 演示了这一点。

React.Children.map(children, (child) => {
    let clonedEl = React.cloneElement( child );
    console.log(clonedEl);
    return clonedEl;
});

该代码块的结果包含带有.$ 的元素添加到每个键的前面。这确实令人困惑，原因有两个。

1：文档说cloneElement 将保留键和引用。

使用 element 作为起点克隆并返回一个新的 React 元素。结果元素将具有原始元素的道具和新道具的浅层合并。新的孩子将取代现有的孩子。原始元素的 key 和 ref 将被保留。

2：console.log 的结果是一个带有保留键和引用的元素...

这会让我相信添加发生在 React.Children.map 代码的某个地方。

更新：查看 React.Children.map 的代码后...

我发现它是由以下函数链添加的：mapChilren -> mapIntoWithKeyPrefixInternal -> traverseAllChildren -> traverseAllChildrenImpl -> mapSingleChildIntoContext。

mapSingleChildIntoContext 的第三个参数是 childKey。它是用nameSoFar === '' ? SEPARATOR + getComponentKey(children, 0) : nameSoFar 调用的，因为它是traverseAllChildrenImpl 中的第三个参数。

SEPARATOR = "." 和 getComponentKey 在转义函数中返回带有 $ 前缀的键。

更新问题：

现在我正在寻找解决此问题的方法...我不确定是否有人考虑使用空字符串调用 traverseAllChildrenImpl 作为 traverseAllChildren 中的 nameSoFar。

我认为这可能是 React.Children.map 构建新 DOM 的预期行为。当我尝试更新动态孩子的道具时，这对我造成了影响。

解决方案：不要使用不打算使用的东西。

我正在构建一组对开发人员来说非常容易的表单控件。状态树是通过映射子节点并使用 .从具有名称的元素中划定字符串名称，以在顶级组件上创建键和值。

顶级表单组件具有用于不同类型控件的 onChange 处理程序，它们根据需要应用于元素的 onChange 属性。此映射是在 componentWillMount 方法中完成的，这就是导致我出现问题的原因。

将映射移动到渲染方法使我不必更新句柄中的子级。句柄中的更新导致元素失去焦点。现在一切都很好！

Answer 1

问题不在于更改密钥的cloneElement。正如文档中所写，cloneElement 保留了原始键。它是为它添加前缀的React.Children.map。如果您不想更改密钥，请使用forEach 而不是map

这是React Code的摘录：

function escape(key) {
  var escapeRegex = /[=:]/g;
  var escaperLookup = {
    '=': '=0',
    ':': '=2',
  };
  var escapedString = ('' + key).replace(escapeRegex, function(match) {
    return escaperLookup[match];
  });

  return '$' + escapedString;
}

function getComponentKey(component, index) {
  // Do some typechecking here since we call this blindly. We want to ensure
  // that we don't block potential future ES APIs.
  if (
    typeof component === 'object' &&
    component !== null &&
    component.key != null
  ) {
    // Explicit key
    return escape(component.key);
  }
  // Implicit key determined by the index in the set
  return index.toString(36);
}

function mapSingleChildIntoContext(bookKeeping, child, childKey) {
  var {result, keyPrefix, func, context} = bookKeeping;

  var mappedChild = func.call(context, child, bookKeeping.count++);
  if (Array.isArray(mappedChild)) {
    mapIntoWithKeyPrefixInternal(
      mappedChild,
      result,
      childKey,
      emptyFunction.thatReturnsArgument,
    );
  } else if (mappedChild != null) {
    if (ReactElement.isValidElement(mappedChild)) {
      mappedChild = ReactElement.cloneAndReplaceKey(
        mappedChild,
        // Keep both the (mapped) and old keys if they differ, just as
        // traverseAllChildren used to do for objects as children
        keyPrefix +
          (mappedChild.key && (!child || child.key !== mappedChild.key)
            ? escapeUserProvidedKey(mappedChild.key) + '/'
            : '') +
          childKey,
      );
    }
    result.push(mappedChild);
  }
}

function mapChildren(children, func, context) {
  if (children == null) {
    return children;
  }
  var result = [];
  mapIntoWithKeyPrefixInternal(children, result, null, func, context);
  return result;
}