React Native条件性隐藏RadioButton：解决React.cloneElement报错

问题原因 #

RadioGroup组件内部处理子元素时，会直接对每个子节点调用React.cloneElement，但条件渲染返回的false/null不属于React元素，因此触发React.cloneElement(...): The argument must be a React element, but you passed null.错误。

解决方案 #

方案1：过滤无效子元素（推荐） #

提前将所有单选按钮整理为数组，通过filter(Boolean)过滤掉false/null这类无效节点，再传递给RadioGroup：

import React, { useState } from "react";
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import RadioButton, { RadioGroup } from "rn-radio-button-group";

export default function App() {
  const [langValue, setLangValue] = useState("");
  // 定义控制显示的条件，此处用false示例
  const showRedButton = false;

  // 整理单选按钮数组并过滤无效节点
  const radioButtons = [
    <RadioButton
      key="green"
      value={"green"}
      style={{ marginBottom: 10 }}
      size={27}
      color="green"
    >
      <Text style={{ marginLeft: 10, fontSize: 18 }}>Green</Text>
    </RadioButton>,
    // 条件渲染，不满足时返回false，会被filter过滤
    showRedButton && (
      <RadioButton
        key="red"
        value={"red"}
        style={{ marginBottom: 10 }}
        size={27}
        color="red"
      >
        <Text style={{ marginLeft: 10, fontSize: 18 }}>Red</Text>
      </RadioButton>
    ),
    <RadioButton
      key="yellow"
      value={"yellow"}
      style={{ marginBottom: 10 }}
      size={27}
      color="yellow"
    >
      <Text style={{ marginLeft: 10, fontSize: 18 }}>Yellow</Text>
    </RadioButton>,
    <RadioButton
      key="orange"
      value={"orange"}
      style={{ marginBottom: 10 }}
      size={27}
      color="orange"
    >
      <Text style={{ marginLeft: 10, fontSize: 18 }}>Orange</Text>
    </RadioButton>,
  ].filter(Boolean);

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>
      <Text>Test</Text>

      <RadioGroup
        onValueChange={(value) => setLangValue(value)}
        selectedValue={langValue}
      >
        {radioButtons}
      </RadioGroup>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

方案2：使用三元表达式返回空Fragment（备选） #

当条件不满足时，返回空的React Fragment（<></>），确保传入RadioGroup的子节点均为有效React元素：

// 替换原条件渲染代码块
{showRedButton ? (
  <RadioButton
    value={"red"}
    style={{ marginBottom: 10 }}
    size={27}
    color="red"
  >
    <Text style={{ marginLeft: 10, fontSize: 18 }}>Red</Text>
  </RadioButton>
) : <></>}

说明 #

方案1更可靠，直接移除无效节点，避免RadioGroup处理非React元素；方案2虽能解决报错，但会传入空Fragment，存在不必要的节点开销。

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