javascript - 在React JS中调用动态组件

Question

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

请帮我看看我哪里出错了。我认为 ReactJS 无法识别部分组件，因为它来自字符串。有没有办法，我们可以手动编译jsx。

Answer 1

请记住，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可能会让您面临一系列安全漏洞。

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