Машинопись Реакция - Передача/взрыв реквизита в JSX для передачи детям?

#javascript #reactjs #typescript #formik

Вопрос:

после некоторой боли я понял, что на самом деле не понимаю, как это работает или как это на самом деле называется

Вперед: Новичок в typescript/javascript и реагировании

Я использую Formik и пытаюсь создать некоторые пользовательские функции, чтобы облегчить работу моей команды, и я обнаружил, что с помощью Formik я могу сделать следующее (учебные пособия отличные):

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

В этом я теперь могу использовать ошибки, ошибки и т. Д. От Formik (Из того, что я понимаю?)

Как бы я сделал это с помощью своих собственных пользовательских функций/компонентов?

Т.е.

 // In MyComponent
const myCoolConst = "George"

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

Также бонус от меня, но то, что я пытаюсь сделать, считается анти-шаблоном или чем-то в этом роде?

Ответ №1:

Это парадигма рендеринга реквизита, и вот простой пример того, как это сделать,

 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>
  );
}

Здесь children реквизит-это особый вид реквизита, который автоматически доступен вам для отображения контента с помощью обратных вызовов.