Question

目标：我需要对React组件进行一些后处理，这需要移除一些道具。我尝试使用React.cloneElement传递{propToRemove: undefined}作为第二个参数，但是prop并没有被删除，只是设置为undefined。我可以使用React.createElement，但是根据文档，这会丢失ref，这是一个严重的缺点。

一个虚构的示例，它没有做任何有用的事情，只是为了测试：

const removeUnknownPropWithClone = (el) => {
  return React.cloneElement(el, {unknownProp: undefined})
};

const App = (props) => 
  removeUnknownPropWithClone(
    <div unknownProp="1">Hello</div>
  );

这将显示错误消息：“ React无法识别DOM元素上的unknownProp道具”。实际上，该道具已设置为undefined，但它仍然存在。我需要将其完全删除。

Runnable snippet（打开控制台以查看错误消息）

相关问题（但未在此处回答）：React - Remove prop from child

相关源代码：https://github.com/facebook/react/blob/master/packages/react/src/ReactElement.js#L293

Answer 1

有时候看一下源代码是很好的;）

cloneElement不允许删除道具-它们已被复制并覆盖。没有删除或传递函数的选项。

但是看起来更高一点，我们可以看到：

export function cloneAndReplaceKey(oldElement, newKey) {
  const newElement = ReactElement(
    oldElement.type,
    newKey,
    oldElement.ref,
    oldElement._self,
    oldElement._source,
    oldElement._owner,
    oldElement.props,
  );

  return newElement;
}

看起来很容易扩展，但是没有导出ReactElement：]

...，但看起来像ref，key，并且修剪过的道具可以（通过配置）复制/传递到createElement。检查是否足够。

Answer 2

您可以将元素道具复制到另一个对象并删除新对象中不需要的道具

const removeUnknownPropWithClone = (el) => {
  const props = { ...el.props }
  delete props['unknownProps']
  return React.cloneElement(el, props)
};

Answer 3

使用JSX非常简单（在Children.map()函数内部）：

const { filtered, ...rest } = child.props
const clone = <child.type key={child.key} ref={child.ref} {...rest} />

Answer 4

我们是这样解决的

const { propToRemove, ...childProps } = child.props
const filteredChild = { ...child, props: childProps }

return React.cloneElement(filteredChild, additionalProps)

从克隆的React组件中移除道具

4 个答案: