Typescript + React - Passing/Exploding JSX 中的道具要传递给 children？

Question

经过一些痛苦我意识到我实际上并不了解它是如何工作的或者它到底叫什么

前言：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 的 touched、errors 等（据我了解？）

我如何用我自己的习惯来做到这一点 functions/components？

即

// In MyComponent
const myCoolConst = "George"

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

也是我的奖金，但我正在尝试做的事情被认为是 anti-pattern 还是什么？

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

Typescript + React - Passing/Exploding JSX 中的道具要传递给 children？

Typescript + React - Passing/Exploding Props in JSX to pass to children?

javascript

typescript

reactjs

formik