Javascript 使用react.createElement时对象不是有效的react子对象？

我有一个简单的文本组件：

import * as React from 'react'

interface IProps {
  level: 't1' | 't2' | 't3',
  size: 's' | 'm' | 'l' | 'xl' | 'xxl',
  subtle?: boolean,
  children: any,
}

const textSize = (size) => {
  if (size === 's') {
    return 'f6'
  }
  if (size === 'm') {
    return 'f5 fw3'
  }
  if (size === 'l') {
    return 'f4 fw5  lh-2'
  }
  if (size === 'xl') {
    return 'f3 fw5 lh-2 ls-025 ma0'
  }
  if (size === 'xxl') {
    return 'f2 fw5 lh-title ls-03125 ma0 mb3'
  }
}

const elements = {
  t1: 'h2',
  t2: 'h1',
  t3: 'span',
};


export const Text = ({ children, level, size, subtle, ...props }: IProps) => {
  return React.createElement(
    elements[level] || elements.t3,
    {className: textSize(size)},
    props,
    children,
  );
}

其用法如下：

    <Text
      size='s'
      level={'t3'}>
        Hello world
    </Text>

你好，世界

但是，当行

{className:textSize（size）}，

包含在主组件中时，我得到以下错误：

对象作为React子对象无效（找到：具有键{}的对象）。如果要呈现子对象集合，请改用数组。在未知的范围内`

你知道这是什么原因吗

---

React.createElement

接受3个参数，然后尝试传递4个参数

React.createElement（组件、道具等子项）

在你的例子中，

{className:textSize（size）}

变成了

道具

，而你的

道具

实际上是

子项

。你可能需要做一些类似的事情

return React.createElement(
    elements[level] || elements.t3,
    {...props, className: textSize(size)},
    children,
  );

---

为什么有卷曲的括号{}环绕这条线？嘿，谢谢你的回答，不幸的是错误仍然存在。我已经用代码沙盒更新了这个问题