react.children.map中的react.cloneElement导致元素键更改

Question

正如标题所述，在react.cloneElement中使用react.children.map会导致元素键发生更改。

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

MapSingleChildIntoContext的第三个参数是ChildKey。它是用namesofar===''调用的？SEPARATOR+getComponentKey（children,0):namesofar，它是TraverSeallChildrenImpl中的第三个参数。

separator=“.”和GetComponentKey在转义函数中返回前缀为$的键。

更新的问题：

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

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

Answer 1

问题不在于更改密钥的CloneElement。正如文档中所写的，cloneElement保留原始键。为其添加前缀的是react.children.map。如果不希望更改键，请使用foreach而不是map

这是React代码的摘录：

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