Typescript + React - 在 JSX 中传递/分解道具以传递给孩子？

Question

after some pain I've realised I don't actually understand how this works or really what its called

Foreward: New to typescript/javascript and react

I'm using Formik and trying to create some custom functions to make it easier for my team, and I've found with Formik I can do the following (Tutorials are great):

<Formik
      {...props}
      validationSchema={validationSchema}
      onSubmit={async (values, helpers) => {
        await props.onSubmit(values, helpers);
        setCompleted(true);
      }}
    >
      {({ isSubmitting, setFieldValue, touched, errors }) => (
      ...

In this I'm now able to use touched, errors etc. from Formik (From what I understand?)

How would I do this with my own custom functions/components?

Ie

// In MyComponent
const myCoolConst = "George"

<MyComponent name="Hello" > {(myCoolConst)} => {
  <text>{myCoolConst}</text>
}
</>

Also bonus from me, but is what I'm trying to do considered an anti-pattern or something?

Answer 1

This is the render props paradigm and here is a simple example of how to go about it,

const MyComponent = ({children}) => {
  return (
    <>
      <div>Content from MyComponent</div>
      <>{children(1, 2)}</>
    </>
  );
};

export default function App() {
  return (
    <MyComponent>
      {(a, b) => {
        return <>
        <p>{a}</p>
        <p>{b}</p>
        </>
      }}
    </MyComponent>
  );
}

Here the children prop is a special kind of prop, which is automatically available to you to have content rendered via callbacks.