我应该使用 React.createElement 从组件返回多个子组件吗？

Question

我有一个接收原始文本和一些扩展信息的组件。它使用此信息增强文本，并返回一组文本片段和增强的组件。

最初，我创建了一个函数来进行转换并返回转换后的内容，使用

React.createElement

:

const transform = (text, data) => {
  // do the transformation
  // ... 

  // In the end, I have this array consisting of text snippets and Components
  transformedElements = [
    'text',
    <MyLink>Word</MyLink>,
    'more text',
    <MyLink>AnotherWord</MyLink>,
  ];
  return React.createElement('div', null, transformedElements);
}

但是后来我把它写成一个组件：

const Transformed = ({text, data}) => {
  // do the transformation ...
  transformedElements = [
    'text',
    <MyLink>Word</MyLink>,
    'more text',
    <MyLink>AnotherWord</MyLink>,
  ];
  return transformedElements; 
  // also works as:
  // return React.createElement('div', null, transformedElements);
}

我意识到如果我直接这样做

return transformedElements

也会起作用。

我猜它的性能更好，因为它不调用 createElement，而且我注意到的唯一区别是返回的组件不会像之前的实现那样被包装在包含元素中。

那么，我应该调用

createElement

还是只返回数组？每种方法的优点、缺点和缺点是什么（如果有）？

Answer 1

1. 直接返回数组（推荐）

const Transformed = ({ text, data }) => {
  const transformedElements = [
    'text',
    <MyLink key="word-link">Word</MyLink>,
    'more text',
    <MyLink key="another-word-link">AnotherWord</MyLink>,
  ];

  return transformedElements;  // Just return the array
};

优点：

• 写起来更容易、更干净。
• 更好的性能（无需额外的包装）。

缺点：

• 没有包装元素，如果需要容器，可能会导致布局问题。

---

2. 使用

React.createElement()

（如果您需要包装纸）

const transform = (text, data) => {
  const transformedElements = [
    'text',
    <MyLink key="word-link">Word</MyLink>,
    'more text',
    <MyLink key="another-word-link">AnotherWord</MyLink>,
  ];

  return React.createElement('div', null, transformedElements);  // Creates a div wrapper
};

优点：

• 提供父包装器（如

  div

  ），对于布局控制很有用。

缺点：

• 如果不需要，添加不必要的包装。
• 稍微详细一点。

---

结论：

• 直接返回数组如果不需要父包装器。
• 如果您需要容器元素，请使用

  createElement

  。