Javascript 在React JS中调用动态组件

我是新手。我从另一个javascript类的HTML字符串调用react组件。但该组件未在屏幕上渲染

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

类表单扩展组件{
render（）{
var标记=“”；
返回（）；
}
}
类节扩展组件{
render（）{
返回（第1行）；
} 
}

请帮帮我，我哪里做错了。

---

我认为reactjs无法识别sections组件，因为它来自字符串。有没有办法，我们可以手动编译jsx。

记住jsx与HTML不同。当您编写类似于

的内容时，实际上您正在编写

React.createElement（Sections，null）

如果将

“

作为字符串，并希望将其解析为对

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;
}

函数getDynamicComponent（）{ 回流段； } 函数render（）{ const Component=getDynamicComponent（）； 返回； } //或 函数getDynamicComponentInstance（）{ 返回； } 函数render（）{ 常量组件=getDynamicComponentInstance（）； 返回组件； } 从

“

推断正确组件的唯一方法是手动解析它，并使用

eval

将名称解析为适当的变量。解析JSX是非常重要的，使用

eval

可能会让您暴露出一整套安全漏洞

---

除非您的动态组件名称来自网络，或者来自单独的工作程序，否则返回动态组件的函数没有理由不能像上面的示例那样编写。

请记住，JSX与HTML不同。当您编写类似于

的内容时，实际上您正在编写

React.createElement（Sections，null）

如果将

“

作为字符串，并希望将其解析为对

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;
}

函数getDynamicComponent（）{ 回流段； } 函数render（）{ const Component=getDynamicComponent（）； 返回； } //或 函数getDynamicComponentInstance（）{ 返回； } 函数render（）{ 常量组件=getDynamicComponentInstance（）； 返回组件； } 从

“

推断正确组件的唯一方法是手动解析它，并使用

eval

将名称解析为适当的变量。解析JSX是非常重要的，使用

eval

可能会让您暴露出一整套安全漏洞

---

除非您的动态组件名称来自网络，或者来自单独的辅助进程，否则没有理由不能像上面的示例那样编写返回动态组件的函数。

是的，我已将节定义为组件。我动态生成JSX作为字符串，并在render方法中返回它。React无法将其解析为节组件，因此不会呈现节组件。我尝试过它，但它不会显示在HTML字符串中。如果我给出“”，则它给出的是未捕获不变冲突：无效标记。如果我只给出“Sections”，那么它是在创建Section组件，而不是调用预定义的组件。如果您发布

t.getComponent

的代码，会有很大帮助。什么是

singleSection

？什么是

Builder（）

？我不确定这个例子是否正确，我已经将节定义为一个组件。我动态生成JSX作为字符串，并在render方法中返回它。React无法将其解析为节组件，因此不会呈现节组件。我尝试过它，但它不会显示在HTML字符串中。如果我给出“”，则它给出的是未捕获不变冲突：无效标记。如果我只给出“Sections”，那么它是在创建Section组件，而不是调用预定义的组件。如果您发布

t.getComponent

的代码，会有很大帮助。什么是

singleSection

？什么是

Builder（）

？我不确定这个例子是否是Dan，我在t.getComponent（）方法中有一个组件名称列表，它将以html字符串的形式给我名称，我必须在UI上呈现它。如果你以JSX的形式返回字符串，那么你将很困难。最好的选择是重写函数以返回实际的JSX。Dan，我在t.getComponent（）方法中有一个组件名称列表，它将以html字符串的形式提供名称，我必须在UI上呈现该名称。如果您以JSX的形式返回字符串，那么您将遇到困难。最好的选择是重写函数以返回实际的JSX。