对象在使用React.createElement时没有有效的反应子？

Question

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

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子对象无效(找到:键{}的对象)。如果您打算呈现一个子集合，请使用数组代替。在跨度中的未知数

有什么原因吗？

码箱

Answer 1

React.createElement使用3个参数，然后尝试传递4个参数。

React.createElement(组件、道具、...children)

在您的例子中，{className: textSize(size)}变成了props，而您的props实际上是children。你可能需要做些像

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