如何将props.children转为合法JSX元素？规避类型与ESLint报错

方案一：通过类型处理规避Fragment用法 #

单个子元素场景 #

如果组件仅接收单个合法JSX元素作为子组件，可使用React.Children.only确保返回单个JSX元素，让TypeScript自动推导正确的返回类型：

import React from 'react';

const MyComponent = ({ children }: { children: React.ReactNode }) => {
  return React.Children.only(children);
};

这种方式既不会触发TypeScript类型错误，也无需额外包裹Fragment，自然不会触发ESLint报错。注意：若传入多个子元素，React.Children.only会抛出运行时错误，仅适用于明确单个子元素的场景。

多子元素场景 #

若需要支持多个子元素，可通过类型断言明确返回类型（需确保业务场景中children不会包含非JSX元素的非法值）：

import React from 'react';

const MyComponent = ({ children }: { children: React.ReactNode }) => {
  return children as React.JSX.Element | null;
};

这种方式跳过TypeScript类型检查，适合能完全控制子元素合法性的场景。

方案二：配置ESLint允许表达式场景的Fragment #

若更倾向于用Fragment解决类型问题，可修改ESLint配置，开启react/jsx-no-useless-fragment规则的allowExpressions选项，让包裹ReactNode的Fragment不被判定为无用：
在ESLint配置文件（如.eslintrc.js）中添加：

module.exports = {
  // 其他配置...
  rules: {
    "react/jsx-no-useless-fragment": ["error", { "allowExpressions": true }]
  }
};

之后即可安全用Fragment包裹返回值：

import React from 'react';

const MyComponent = ({ children }: { children: React.ReactNode }) => {
  return <>{children}</>;
};

TypeScript类型错误会被解决，同时ESLint也不会再抛出无用Fragment的报错。

内容的提问来源于stack exchange，提问作者nullromo