Question

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

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

当我这样做时

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

{dymComp}

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

在此先感谢您提供任何线索/帮助

Answer 1

要动态创建元素时，必须使用函数返回元素（我是说必须使用{createDymComp（）}而不是{dymComp}），对于函数创建者，您有2个选择1.根据您的定义使用React.createElement（）https://reactjs.org/docs/react-api.html#createelement，也可以使用switch case返回特定组件

    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>)

}

如何动态渲染组件

1 个答案: