我在我的应用程序中使用此模式，请查看：

import React, { useCallback, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { getGeo } from '@/data/geoLocation/useGeoLocation';
import { GeoLocation } from 'types/GeoLocation';

interface ChildrenParams {
  currentLanguage: string;
  handleChangeLanguage: (lang: string, cb?: () => void) => void;
  languages: string[];
}

export default function LocaleToggle({
  children,
}: {
  children: (params: ChildrenParams) => JSX.Element;
}): JSX.Element {
  const { i18n } = useTranslation();

  const languages: string[] = React.useMemo(
    () => Object.keys(i18n.services.resourceStore.data),
    [i18n],
  );

  // Set stored language on mount.
  useEffect(() => {
    const region = i18n.language;
    if (!languages.includes(region)) {
      getGeo().then((ip: GeoLocation) => i18n.changeLanguage(ip.country_code));
      return;
    }
    i18n.changeLanguage(region.toLowerCase());
  }, [i18n, languages]);

  const handleChangeLanguage = useCallback(
    (lang: string, cb?: () => void) => {
      i18n.changeLanguage(lang.toLocaleLowerCase());
      if (cb) cb();
    },
    [i18n],
  );

  return (
    <>
      {children({
        currentLanguage: i18n.resolvedLanguage,
        handleChangeLanguage,
        languages,
      })}
    </>
  );
}

然后，我可以像这样使用它，在formik的方式：

<LocaleToggle>
    {({ languages }) => (
      <Select onChange={handleChangeLanguageSelect} value={newLang}>
        {languages.map((l) => (
          <option key={l} value={l}>
            {getLanguage(l)}
          </option>
        ))}
      </Select>
    )}
  </LocaleToggle>

我不知道这是怎么叫的，但我想它的名字是'渲染 prop 模式'

JSX文档将这些函数作为子函数调用：

作为子项运行

通常，JSX中插入的JavaScript表达式将计算为字符串、React元素或这些元素的列表。但是，props.children的工作原理与其他任何prop一样，它可以传递任何类型的数据，而不仅仅是React知道如何呈现的类型。例如，如果您有一个自定义组件，您可以让它接受props.children这样的回调：

// Calls the children callback numTimes to produce a repeated component
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

传递给自定义组件的子元素可以是任何内容，只要该组件在呈现之前将它们转换为React可以理解的内容。这种用法并不常见，但如果您想扩展JSX的功能，它是有效的。
x一个一个一个一个x一个一个二个x