如何判断React组件中传入的JS函数返回值是否为JSX？

方法1：通过React元素的内置特征判断 #

React组件（函数组件）调用后返回的是React元素，这类元素自带$$typeof属性，值为Symbol.for('react.element')。你可以在组件内部先调用一次create函数（传入对应params），再判断返回值的类型：

// List组件内部逻辑
const handleCreate = (params) => {
  const result = create(params);
  // 判定是否为React元素
  if (result?.$$typeof === Symbol.for('react.element')) {
    // 是React组件，直接渲染返回的JSX
    return <>{result}</>;
  } else if (typeof result === 'string') {
    // 是URL字符串，执行跳转逻辑
    window.location.href = result;
  }
  // 兜底处理：返回非预期值时的默认逻辑
  console.warn('create属性返回值不符合预期格式');
};

注意：如果传入的是无需参数的组件，调用时传空对象{}也不会有问题；若担心函数调用有副作用，可优先考虑方法2。

方法2：约定自定义标记区分 #

和开发者约定，传递React组件类型的create时，给函数添加一个自定义属性（比如isReactComponent）作为标记：

// 开发者使用组件时的写法
const Form = () => <div>新增表单</div>;
// 添加自定义标记
Form.isReactComponent = true;

// List组件内部逻辑
const handleCreate = (params) => {
  if (create.isReactComponent) {
    // 是React组件，直接渲染（可传入params作为props）
    return <create {...params} />;
  } else {
    // 是返回URL的函数，调用后跳转
    const url = create(params);
    typeof url === 'string' && (window.location.href = url);
  }
};

这种方式完全避免了调用函数的潜在副作用，可控性更强。

方法3：依赖React组件的命名约定辅助判断 #

React社区默认约定组件名称首字母大写，而返回URL的函数通常是匿名函数或小写开头的命名函数，可以基于这个特征做辅助判断：

// 辅助判断函数
const isReactComponent = (fn) => {
  return typeof fn === 'function' && fn.name && /^[A-Z]/.test(fn.name);
};

// List组件内部逻辑
const handleCreate = (params) => {
  if (isReactComponent(create)) {
    return <create {...params} />;
  } else {
    const url = create(params);
    typeof url === 'string' && (window.location.href = url);
  }
};

提示：这种方法依赖命名规范，不够严谨，建议和其他方法结合使用。

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