使用 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 子項無效（找到：object，鍵為 {}）。 如果您打算呈現子項集合，請改用數組。 在跨度未知`

有什么想法會導致這種情況嗎？

代碼沙盒

Answer 1

React.createElement取 3 arguments，你嘗試傳 4。

React.createElement（組件，道具，...兒童）

在您的情況下， {className: textSize(size)}成為props ，而您的props實際上是children 。 你可能需要做類似的事情

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