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

Question

经过一番痛苦，我意识到我实际上并不了解它是如何工作的，也不知道它到底叫什么

Foreward：typescript/javascript 和 react 的新手

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

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

在此我现在可以使用 Formik 中的 touch、errors 等（据我了解？）

如何使用我自己的自定义函数/组件来做到这一点？

即

// In MyComponent
const myCoolConst = "George"

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

也是我的奖励，但我正在尝试做的事情是否被视为反模式或其他什么？

Answer 1

这是render props 范式，这里有一个简单的例子来说明如何去做，

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