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

Question

在经历了一些痛苦之后，我意识到我实际上并不理解它是如何工作的，也不知道它到底叫什么

前言：打字稿/javascript 和反应的新手

我正在使用 Formik 并尝试创建一些自定义函数以使我的团队更轻松，并且我发现使用 Formik 我可以执行以下操作（教程很棒）：

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

在这里，我现在可以使用 Formik 的 touched、errors 等（据我了解？）

我将如何使用我自己的自定义函数/组件来执行此操作？

IE

// In MyComponent
const myCoolConst = "George"

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

也是我的奖励，但是我正在尝试做的事情被认为是反模式还是什么？

Answer 1

这是渲染道具范例，这里是一个简单的例子，说明如何 go 关于它，

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道具是一种特殊的道具，您可以自动使用它来通过回调呈现内容。