从克隆的 React 组件中删除一个 prop

Question

Goal: I need to perform some post-processing of React components, and that involves removing some props. I tried to use React.cloneElement passing {propToRemove: undefined} as the second argument, but the prop is not removed, just set to undefined . I could use React.createElement , but according to the docs, that would lose ref s, which is a serious drawback.

A contrived example not doing anything useful, just to test:

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

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

This shows the error message: "React does not recognize the unknownProp prop on a DOM element". Indeed, the prop is set to undefined , but it's still there. I need to completely remove it.

Runnable snippet (open the console to see the error messages)

Related question (but not answered there): React - Remove prop from child

Relevant source code: https://github.com/facebook/react/blob/master/packages/react/src/ReactElement.js#L293

Answer 1

Sometimes it's good to look at sources ;)

cloneElement doesn't let remove prop - they are copied and overwritten. No option for deleting or passing function.

But looking a bit higher we can see:

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

  return newElement;
}

Looks easy to extend but ReactElement isn't exported :]

... but it looks like ref , key and trimmed props can be copied/passed (by config) to createElement . Check if it will be sufficient.

Answer 2

Very simple with JSX (inside a Children.map() function):

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

Answer 3

We solved it this way

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

return React.cloneElement(filteredChild, additionalProps)

Answer 4

You could copy the element props to another object and delete the undesired prop in the new object

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