Reactjs 如何动态呈现react组件

我正在尝试动态调用页面中的组件。例如，基于某些逻辑，将从json文件中获取组件，如下所示

[{"page":{"pageType": "sales","componentName":  "<SaleList res={grid} />"}}]

[{“页面”：{“页面类型”：“销售”、“组件名称”：“}}]

当我这样做的时候

const dymComp = <SaleList res={grid} /> 

{dymComp}

const dymComp=
{dymComp}

工作正常。 但当我从json获取它时，它在页面上呈现为字符串，而不是作为组件调用

    const firstElement = () => {return (<div></div>)}
const SecElement = () => {return (<div></div>)}

const yourCOmponent = (props) => { 

  function elementCreator(type){
switch(type) 
{
case '1':
  return firstElement; 
 case '2':
    return SecElement;
  }
}
    
    return (<div>{elementCreator(props.type)}</div>)

---

提前感谢您提供的任何提示/帮助

当您想要动态创建元素时，必须使用函数返回元素（我的意思是您必须使用{createDymComp（）}而不是{dymComp}）， 对于函数创建者，您有2个选项1。根据定义使用React.createElement（），也可以使用开关大小写返回特定组件

    const firstElement = () => {return (<div></div>)}
const SecElement = () => {return (<div></div>)}

const yourCOmponent = (props) => { 

  function elementCreator(type){
switch(type) 
{
case '1':
  return firstElement; 
 case '2':
    return SecElement;
  }
}
    
    return (<div>{elementCreator(props.type)}</div>)

const firstElement=（）=>{return（）}
const SecElement=（）=>{return（）}
const yourCOmponent=（props）=>{
function elementCreator（类型）{
开关（类型）
{
案例“1”：
返回第一个元素；
案例“2”：
返回元素；
}
}
返回（{elementCreator（props.type）}）

---

}

我相信你的要求是不可能的。如果您真的想这样做，我建议您使用

switch

语句创建一个函数，该语句将

pageType

和

componentName

作为参数，并返回实际的

React

组件，它是

函数

，而不是

字符串

。是否尝试过React.createElement（）？@AlirezaYadegari您不需要传递一个实际的

React

组件，而不仅仅是一个

字符串

？

React

应该如何知道

“

是什么意思？请您详细说明如何使用OP提供的

JSON

数据使用

React.createElement

？