你可以将 props 传递给 JSX 引用吗？

Question

Before I begin with my question, allow me to clarify - the question here is a simplification of the issue, I'm working on an already large codebase on a legacy project for a client on short timespan and re-structuring the data would take me more time than trying to figure this out - I know this is not an ideal way to be try to be passing props around, so please don't just link to tutorial about how to be passing props

The gist of it is, I have a large array of objects, all of which have the following property { icon: <SomeJSXReference /> }
I basically created a re-usable abstraction component that returns the icon property based on certain passed props into it.

Issue is, i need to pass one of the props to the icon reference itself. Here's a rough pseudo-component I've written, to make it a bit clearer.

const objectsArray = [{ icon: <SpecificIcon /> }, /*...*/]
const Simplified = (props: { color: string }) => {
  const { color } = props
  const toRender = objectsArray.someOperationsLeadingToFinalObjectReference()
  return toRender.icon
}

What I need to do is somehow append a stroke={color} prop to the JSX referenced inside the toRender.icon pointer

Resulting basically in

• <toRender.icon stroke={color} /> (toRender as pseudo-pointer, note the lowercase)
• <SpecificIcon stroke={color} /> (equivalent of above = what should be returned) ˆ

Note: This does not explicitly have to be <SpecificIcon /> , but rather whatever JSX.Element toRender.icon points to

Is there any way I could do this, that's not occuring to me?

Answer 1

There are two ways you can do it.

1. If the component already constructed (for what constructed means see JSX in Depth ):

{ icon: <SpecificIcon /> }

You can use React.cloneElement :

[<Counter />].map(Component => React.cloneElement(Component, { num: 5 }))

2. If the component not constructed (which is a better approach , because the function/constructor doesn't yet executed):

{ icon: SpecificIcon }

You can render it while passing props:

[Counter].map((Component, index) => <Component key={index} num={2} />)

---

See full example:

const Counter = ({ num = 0 }) => <div>{num}</div>;

const App = () => {
  return (
    <>
      <Counter />
      {[<Counter />].map(Component =>
        React.cloneElement(Component, { num: 4 })
      )}
      {[Counter].map((Component, index) => (
        <Counter key={index} num={2} />
      ))}
    </>
  );
};