Question

我是反应JS的新手。我从一个来自另一个javascript类的HTML字符串调用react组件。但该组件未在屏幕上呈现。

ConcurrentModificationException

请帮助我哪里出错了。我认为reactjs不识别sections组件，因为它来自字符串。有什么办法，我们可以手动编译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可能会让您遇到一大类安全漏洞。

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

在React JS中调用动态组件

1 个答案: