Javascript 如何从XML创建InjectReact组件

假设您制作了一个web框架，它可以帮助您快速为客户创建博客。对于这篇文章来说，它每次都是相同的博客模板，改变的是内容。您的React应用程序是以下内容的简单结构[内容状态每次都在变化]

<App>
  <Navigation/>
  <Content/>
</App>

框架的关键是您拥有包含HTML的XML文件。每个XML文件代表一篇博客文章。该应用程序从XML文件中提取所有HTML，并将其置于“blog posts”数组中的应用程序状态。根据应用程序的状态，数组中的特定条目将显示在内容中

内容的状态有一个名为“html”的字段，该字段保存以字符串形式注入的html。[您必须使用危险的LysetinerHTML]

---

这个概念很好用，我现在有了一个版本。但是，假设您有一个React组件，希望将其添加到每个博客文章中。假设您想将组件添加到特定部分的特定博客文章中。你想给它添加道具之类的东西。现在，这是一个危险的窗口

这就是我一直在努力寻找最佳方向的地方。我现在唯一的想法是：

既然您现在要用XML编写JSX，只需让每个博客文章都有自己的组件即可。如果this.state.currentPost==1，则显示BlogPost1和类似内容。然而，根据你有多少博客帖子，你必须有大量的if语句，而且每次你有一篇新的博客帖子时都要添加if语句并不理想

---

当我读到你问题的标题时，我很好奇，发现这个库可以将XML解析为React组件：。但那不是你想要的

当你想在HTML字符串中间使用组件时，我建议：此组件将其子项（带有markdown/html/react的字符串）编译为react节点

其文档中的示例：

 var React = require('react');
 var Markdown = require('react-remarkable');

 var MyComponent = React.createClass({

   render() {
     return (
       <div>
         {/* Pass Markdown source to the `source` prop */}
         <Markdown source="**Markdown is awesome!**" />

         {/* Or pass it as children */}
         {/* You can nest React components, too */}
         <Markdown>{`
           ## Reasons React is great

           1. Server-side rendering
           2. This totally works:

           <SomeOtherAmazingComponent />

           Pretty neat!
         `}</Markdown>
       </div>
     );
   }

 });

var React=require（'React'）；
var降价=要求（‘反应显著’）；
var MyComponent=React.createClass({
render（）{
返回(
{/*将标记源传递给`source`prop*/}
{/*或将其作为子项传递*/}
{/*您也可以嵌套React组件*/}
{`
##理由很好
1.服务器端渲染
2.这完全有效：
相当整洁！
`}
);
}
});