如何不使用React Fragments，用Array.map渲染两个React元素

方案1：自定义无渲染容器组件替代Fragment #

Fragment的核心是只渲染子元素、不生成额外DOM节点，我们可以自己实现一个功能完全相同的组件，避开不能用官方Fragment的限制：

// 自定义无渲染容器组件
const VoidContainer = ({ children }) => children;

// 数据示例
const radioItems = [
  { id: 'opt1', label: '选项1', content: '选项1对应的内容' },
  { id: 'opt2', label: '选项2', content: '选项2对应的内容' },
];

// 组件使用
function RadioGroupWithContent() {
  return (
    <RadioGroup>
      {radioItems.map(item => (
        <VoidContainer key={item.id}>
          <Radio id={item.id} label={item.label} />
          <div>{item.content}</div>
        </VoidContainer>
      ))}
    </RadioGroup>
  );
}

这个组件只会把内部的Radio和div直接渲染到RadioGroup下，不会产生额外的DOM节点，和Fragment的效果完全一致。如果你的RadioGroup组件对子元素类型有校验，需要确认它是否接受自定义组件作为子元素。

方案2：手动编写固定子元素（非动态场景） #

如果选项数量固定、不需要动态生成，直接在RadioGroup下逐个写Radio和对应div即可，完全不需要循环或容器组件：

function StaticRadioGroup() {
  return (
    <RadioGroup>
      <Radio id="opt1" label="选项1" />
      <div>选项1对应的内容</div>
      <Radio id="opt2" label="选项2" />
      <div>选项2对应的内容</div>
    </RadioGroup>
  );
}

这种方式最直接，适合不需要动态渲染的场景。

方案3：构建一维子元素数组直接传入 #

可以提前构建包含Radio和div的一维JSX元素数组，作为children直接传给RadioGroup，避免嵌套结构：

// 静态场景直接构建数组
const radioChildren = [
  <Radio key="opt1" id="opt1" label="选项1" />,
  <div key="content1">选项1对应的内容</div>,
  <Radio key="opt2" id="opt2" label="选项2" />,
  <div key="content2">选项2对应的内容</div>,
];

// 动态场景用flatMap生成一维数组
const radioItems = [/* 数据同方案1 */];
const dynamicRadioChildren = radioItems.flatMap(item => [
  <Radio key={`radio-${item.id}`} id={item.id} label={item.label} />,
  <div key={`content-${item.id}`}>{item.content}</div>,
]);

// 组件使用
function RadioGroupWithPrebuiltChildren() {
  return <RadioGroup>{dynamicRadioChildren}</RadioGroup>;
}

生成的一维数组会直接作为RadioGroup的一级子元素渲染，不需要任何容器包裹。

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