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

在那里获得的道具称为渲染道具，请参考this链接以获取官方文档。

渲染道具是一种将道具传递给孩子的方法

使用此样式模式，我们将子级呈现为函数，并且可以将参数传递给该子项

以同样的方式，<Formik/>沿孩子们renderProps向下走下去

如果您想了解道具的传递方式以及子元素的呈现方式，可以参考this <Formik/>组件代码

请参阅this文章，详细介绍渲染道具

有关实时示例，请参考this代码沙箱

Answer 2

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

例如

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

好了，如果让孩子们去做功能呢？

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

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

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

此处，formik就是这样的组件之一，它将把form道具传递给child函数。这也称为渲染道具。

理解Formik中的道具访问语法

2 个答案: