在React中动态命名和嵌套组件

Question

我试图动态地命名一些提供者作为响应。我收到以下错误：

  

此浏览器无法识别标签First.Provider。如果你的意思是   要渲染React组件，请以大写字母开头。

和

  

First.Provider使用不正确的大小写。使用PascalCase进行React   组件或HTML元素的小写字母。

我不确定如何命名这些组件。我已经尝试过对问题Here的回答，但是我正在循环和嵌套组件，因此我需要一个开始和结束标记，所以我认为React.createElement不起作用，并且上面链接中的大多数答案都是手动命名组件，我需要动态地命名与对象中的值相对应的组件。这是我的代码：

{Object.keys(state)
  .reverse()
  .reduce((acc, item) => {
    const Tag = `${item}.Provider`;
    return <Tag>{acc}</Tag>;
  }, props.children)}