无法理解 Formik 中道具访问的语法

Question

在为 <Formik /> here 给出的示例中，我们可以使用以下代码访问儿童的 Formik 上下文道具：

import React from 'react';
import { Formik } from 'formik';

const BasicExample = () => (
  <div>
    <h1>My Form</h1>
    <Formik
      initialValues={{ name: 'jared' }}
      onSubmit={(values, actions) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }, 1000);
      }}
    >
      {props => (
        <form onSubmit={props.handleSubmit}>
          <input
            type="text"
            onChange={props.handleChange}
            onBlur={props.handleBlur}
            value={props.values.name}
            name="name"
          />
          {props.errors.name && <div id="feedback">{props.errors.name}</div>}
          <button type="submit">Submit</button>
        </form>
      )}
    </Formik>
  </div>
);

我在理解这里发生的事情时遇到问题：

>
  {props => (

这个'props'是从哪里来的，这是什么语法。我有一种感觉 <Formik /> 的语法糖让我更难理解。

谢谢。

Answer 1

你得到的道具被称为渲染道具，请参考thislink官方文档。

Render Props 是一种将 props 传递给 children

的方式

使用这种样式模式，我们将 children 渲染为一个函数，我们可以将参数传递给

以同样的方式，<Formik/>将一些renderProps传递给children

你可以参考this <Formik/>组件代码，如果你想看看props是如何传递的以及children是如何渲染的

请参考this文章详细解释render props

请参考 this 代码沙箱以获取实时示例

Answer 2

请记住，在 JSX 中，两个标签内的任何内容都是 children。

例如

<div>
  I’m the child
</div>

好吧，如果你让 children 成为一个函数呢？

<div>
   {() => { console.log('The children has been executed')}
</div>

好吧，如果包装组件希望它的 children 是一个函数（就像 onClick prop 是一个函数一样）它可以调用它并在它调用时传递数据。

这是一种使用来自 child 组件的数据作为输入来确定要呈现的内容的方法。

这里的 formik 就是这样一个组件 - 它将表单道具传递给 children 函数。这也称为渲染道具。

无法理解 Formik 中道具访问的语法

Trouble Understanding Syntax for Props Access in Formik

reactjs

formik