Javascript 是否可以添加JSX来动态响应代码

假设我想在Javascript函数中动态创建JSX标记树，然后将它们添加到我的代码中。可能吗？如果是，你会怎么做

编辑：我收到的是一个字符串形式的Hello World，所以我不能只返回没有引号的字符串。另外，不要使用

危险的LysetinerHTML

JSX工厂

function jsxFactory() {
  return '<div className="msg"><p>Hello World</p></div>'
}

---

你可以不用引号

return <div className="msg"><p>Hello World</p></div>

returnHello World

如果您明确需要插入嵌入字符串中的HTML，则大致需要：

function createMarkup() {
  return {__html: '<div className="msg"><p>Hello World</p></div>'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

函数createMarkup（）{
返回{uuuhtml:'helloworld
'}；
}
函数MyComponent（）{
返回；
}

除此之外，渲染代码还必须更改为

return jsxFactory（）

。如果我将此代码作为字符串接收，例如

，我将如何将其更改为可在代码中返回和使用的代码？@BenGrunfeld:我希望这不会让人觉得冒犯：），但一般来说，在客户机上运行Babel是您不希望在普通“应用程序”中执行的操作。好的，D3是非常模块化的，可以提供您所需要的数据，而无需实际创建任何标记。对你来说，这可能是一条路。@BenGrunfeld:不客气。如果有帮助的话，我会觉得我一直在做一些滑稽的事情；）这就是编程的乐趣所在。抱歉，我忘了指定我必须在不使用

dangerouslysetinerhtml

@BenGrunfeld的情况下进行编程，你到底为什么要在不使用

dangerouslysetinerhtml

的情况下危险地设置内部HTML？这很危险，因为输出来自我信任的库，即D3。试图将D3输出转换为有效的JSX，并在保持React范式的同时使用D3。@BenGrunfeld这与使用/不使用

危险的LysetinerHTML

有什么关系？无论源是否可信，这仍然是实现这一点的方法。但是有多种方法可以连接D3以进行响应，而不需要抓取HTML并将其插入DOM中，比如or等。React-D3已被弃用，React-faux DOM也存在一些问题。我只是想找到另一种方法，没有简单的解决办法。我认为需要更多的上下文。

React

API定义不允许这样做，因为它会打开XSS攻击。有很多或react+d3库可供查看，看看它们是如何工作的@BlairAnderson react-d3已被弃用-作者声明他们无法再维护它（在自述文件中）。此外，由于D3的复杂性，React-D3从作者身上移除了很多控制

react faux dom也不理想。正在寻找另一种不使用
危险的setinenerHTML
的方法。
function createMarkup() {
  return {__html: '<div className="msg"><p>Hello World</p></div>'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}