React中用createElement实现Heading组件嵌套motion.span的问题

开发者阿泽

2026-7-28

解决Heading组件嵌套motion.span的渲染错误

问题根源

未正确导入motion模块：错误提示里的undefined是因为你没从framer-motion中导入motion，导致motion.span找不到对应组件
原组件写法冗余：内部重复定义Heading组件完全没必要，反而容易造成逻辑混淆

修正方案

方案一：保留React.createElement写法

先确保安装并正确导入framer-motion，然后重构组件：

import React from "react";
import { motion } from "framer-motion"; // 必须添加这行导入

interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
    headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
}

const Heading = ({ headingLevel = "h1", children, ...props }: HeadingProps) => {
    return React.createElement(
        headingLevel,
        props,
        // 直接用React.createElement创建motion.span
        React.createElement(motion.span, {}, children)
    );
};

export default Heading;

方案二：用JSX语法（更直观）

JSX本质是React.createElement的语法糖，写法更简洁：

import React from "react";
import { motion } from "framer-motion";

interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
    headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
}

const Heading = ({ headingLevel = "h1", children, ...props }: HeadingProps) => {
    // 把字符串类型的标题级别转为JSX可识别的标签变量
    const Tag = headingLevel;
    return (
        <Tag {...props}>
            <motion.span>{children}</motion.span>
        </Tag>
    );
};

export default Heading;