向标签内元素传递参数的方法名称及示例咨询（变量源自Formik）

在Formik中，这种向标签内部元素传递组件内部变量的方式叫做Render Props，核心逻辑是让组件接收一个返回React元素的函数作为children（或render属性），并将组件内部的状态、方法（比如Formik的values、handleChange、handleSubmit等）作为参数传入这个函数，外部就能直接使用这些参数来渲染自定义UI。

实现示例（使用children作为函数） #

import { Formik } from 'formik';

function LoginForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      // 表单提交逻辑
      onSubmit={(values) => {
        console.log('提交的数据：', values);
        // 这里可以添加接口请求等逻辑
      }}
    >
      {/* 接收Formik传递的props参数 */}
      {(formikProps) => (
        <form onSubmit={formikProps.handleSubmit}>
          <div>
            <label htmlFor="email">邮箱</label>
            <input
              id="email"
              type="email"
              value={formikProps.values.email}
              onChange={formikProps.handleChange}
              onBlur={formikProps.handleBlur}
            />
            {/* 显示校验错误 */}
            {formikProps.touched.email && formikProps.errors.email && (
              <span style={{ color: 'red' }}>{formikProps.errors.email}</span>
            )}
          </div>
          <div>
            <label htmlFor="password">密码</label>
            <input
              id="password"
              type="password"
              value={formikProps.values.password}
              onChange={formikProps.handleChange}
              onBlur={formikProps.handleBlur}
            />
            {formikProps.touched.password && formikProps.errors.password && (
              <span style={{ color: 'red' }}>{formikProps.errors.password}</span>
            )}
          </div>
          <button type="submit">登录</button>
        </form>
      )}
    </Formik>
  );
}

另一种写法（使用render属性） #

除了用children作为函数，也可以通过render属性传入函数来实现同样效果：

import { Formik } from 'formik';

function LoginForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      onSubmit={(values) => console.log('提交的数据：', values)}
      // 通过render属性传递函数
      render={(formikProps) => (
        <form onSubmit={formikProps.handleSubmit}>
          {/* 内容和上面示例一致 */}
          <div>
            <label htmlFor="email">邮箱</label>
            <input
              id="email"
              type="email"
              value={formikProps.values.email}
              onChange={formikProps.handleChange}
            />
          </div>
          <button type="submit">登录</button>
        </form>
      )}
    />
  );
}

这两种写法本质都是Render Props模式，区别只是参数传递的入口不同，都能让你灵活地使用Formik提供的变量来构建表单UI。

内容的提问来源于stack exchange，提问作者NeX'T'iME