React报错：无法渲染JS函数创建的HTML元素，求解决及样式建议

一、修复组件渲染问题 #

你的代码核心问题是React不支持直接渲染原生DOM元素（通过document.createElement创建的节点），React需要的是JSX元素或React元素。直接返回原生DOM节点会导致React无法识别，自然渲染不出来。

修改步骤：

1. 将createHtmlElements函数改为返回JSX元素，而非原生DOM节点
2. 修正componentList的声明（添加const，避免全局变量污染）
3. 循环渲染时添加key属性，避免React警告

修改后的基础代码：

// 定义Component类型（若未定义）
interface Component {
  type: string;
  details: {
    content: string;
    fontSize: string;
    fontType: string;
    color: string;
  };
}

const Page = () => {
  const componentList: Component[] = [{
    details: {
      content: 'Example Title',
      fontSize: 'large',
      fontType: 'Rubik',
      color: '#e67e22'
    },
    type: 'heading'
  }];

  const renderComponent = (component: Component) => {
    if (component.type === "heading") {
      return <h2>{component.details.content}</h2>;
    }
    // 可添加其他组件类型的处理，默认返回null
    return null;
  };

  return (
    <>
      {componentList.map((component, index) => (
        <div key={index}>{renderComponent(component)}</div>
      ))}
    </>
  );
};

export default Page;

二、样式设置建议 #

利用组件的details属性动态设置样式，推荐几种常用方案：

1. 行内样式（快速实现） #

React的行内样式需要传入驼峰命名的对象，比如font-size要写成fontSize，fontType对应CSS的fontFamily：

const renderComponent = (component: Component) => {
  if (component.type === "heading") {
    const style = {
      fontSize: component.details.fontSize,
      fontFamily: component.details.fontType,
      color: component.details.color
    };
    return <h2 style={style}>{component.details.content}</h2>;
  }
  return null;
};

2. 动态className（适合CSS模块或Tailwind） #

Tailwind CSS示例：

// 映射fontSize到Tailwind文本大小类
const fontSizeMap = {
  small: 'text-sm',
  medium: 'text-base',
  large: 'text-xl'
};

const renderComponent = (component: Component) => {
  if (component.type === "heading") {
    const fontSizeClass = fontSizeMap[component.details.fontSize as keyof typeof fontSizeMap] || 'text-base';
    return (
      <h2 className={`${fontSizeClass} font-${component.details.fontType.toLowerCase()} text-[${component.details.color}]`}>
        {component.details.content}
      </h2>
    );
  }
  return null;
};

CSS模块示例：

/* styles.module.css */
.heading-large {
  font-size: 1.5rem;
}
.heading-medium {
  font-size: 1.25rem;
}
.font-rubik {
  font-family: 'Rubik', sans-serif;
}

import styles from './styles.module.css';

const renderComponent = (component: Component) => {
  if (component.type === "heading") {
    const sizeClass = styles[`heading-${component.details.fontSize}`];
    const fontClass = styles[`font-${component.details.fontType.toLowerCase()}`];
    return (
      <h2 className={`${sizeClass} ${fontClass}`} style={{ color: component.details.color }}>
        {component.details.content}
      </h2>
    );
  }
  return null;
};

3. 样式组件（Styled Components，适合复杂动态样式） #

使用styled-components创建动态样式组件，直接传入props：

import styled from 'styled-components';

const StyledHeading = styled.h2<{
  fontSize: string;
  fontType: string;
  color: string;
}>`
  font-size: ${props => props.fontSize};
  font-family: ${props => props.fontType}, sans-serif;
  color: ${props => props.color};
`;

const renderComponent = (component: Component) => {
  if (component.type === "heading") {
    return (
      <StyledHeading
        fontSize={component.details.fontSize}
        fontType={component.details.fontType}
        color={component.details.color}
      >
        {component.details.content}
      </StyledHeading>
    );
  }
  return null;
};

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