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

IT技术 javascript reactjs
2021-05-24 00:51:50

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

这是一个沙箱，演示了这一点。

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

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

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

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

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

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

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

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

mapSingleChildIntoContext的第三个参数是 childKey。它被称为 with ，nameSoFar === '' ? SEPARATOR + getComponentKey(children, 0) : nameSoFar因为它是里面的第三个参数traverseAllChildrenImpl。

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

更新的问题：

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

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

解决方案：不要使用它们不打算使用的方式。

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

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

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

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;
}
其它你可能感兴趣的问题
上一篇我需要哪种皮带张力计？ 下一篇为什么使用 Docker 容器的 NextJS 在更改开发环境的代码后没有重新加载？