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道具是一種特殊的道具，您可以自動使用它來通過回調呈現內容。