在React JS中调用动态组件

我是JS中的新手。我正在调用来自另一个JavaScript类的HTML字符串中的反应组件。但该组件不在屏幕上呈现。在React JS中调用动态组件

class Form extends Component { 
    render() { 
     var markup = '<Sections />'; 
     return (<div className="content" dangerouslySetInnerHTML={{__html: markup}}></div>); 
    } 

} 

class Sections extends Component{ 
    render(){ 
     return (<div className='row'>Row1</div>); 
    } 
}

请帮我我在哪里错了。我认为reactjs不能识别节段组件，因为它来自字符串。有什么办法，我们可以手动编译jsx。

来源

2016-07-05 user2114575

是的我已经将Section定义为一个组件。我将JSX动态生成为字符串，并在render方法中将其返回。 React无法将其解析为段组件，因此不呈现Section组件 – user2114575

我已经尝试过，但它不显示 – user2114575

在HTML字符串中如果我给出“”，那么它给出Uncaught不变的违规：无效标记。如果我只给“节”，则创建部分组件，但不调用预先定义的组件 – user2114575

记住JSX是不一样的HTML。当你写出类似<Sections />的东西时，你实际上正在编写React.createElement(Sections, null)。

如果您有"<Sections />"作为字符串，并且您想将它解析为React.createElement的调用，那么您需要将其解析为JSX。但是，这发生在编译时（不是运行时），这会阻止您使用动态组件。

如果您想使用动态组件，那么您的构建器方法必须返回组件类或组件实例。

function getDynamicComponent() { 
    return Sections; 
} 
function render() { 
    const Component = getDynamicComponent(); 
    return <Component />; 
} 

// or 

function getDynamicComponentInstance() { 
    return <Sections />; 
} 
function render() { 
    const component = getDynamicComponentInstance(); 
    return component; 
}

从"<Sections />"推断正确组件的唯一方法是手动解析它并使用eval将名称解析到相应的变量。解析JSX不是微不足道的，使用eval很可能会使您面临整个类别的安全漏洞。

除非你的动态组件名称来自网络的到来，或者从单独的工作里面，有没有理由返回动态组件的功能不能被上面写的一样的例子。

来源

2016-07-05 11:56:03

丹，我的部件名称t.getComponent一个list（）方法，这将给我在HTML字符串的名字，我要渲染它的UI。 – user2114575

如果您以JSX形式返回字符串，那么您将遇到困难。最好的选择是重写你的函数来返回实际的JSX。 –

在React JS中调用动态组件

回答

相关问题