使用 React / JSX 生成非 JavaScript 代码

Posted 2023-03-28

【中文标题】使用 React / JSX 生成非 JavaScript 代码

【英文标题】：Using React / JSX for Non-JavaScript Code Generation

【发布时间】：2018-04-08 09:38:23

【问题描述】：

我想知道你是否可以在代码生成框架中使用 React/JSX。

有没有办法在 JSX 中做类似下面代码的事情？

var className = "Person"
return (
     //// public class className 
     //// 
     ////
     //// 
);

在哪里 //// 将是一些特殊字符或字符序列，向 JSX 解析器发出信号，表明这应该只是纯文本？

或者有没有更好的方法使用已经存在的 React？

【问题讨论】：

你想完成什么？

我猜您可以将所有内容都视为字符串并使用 react 来操作字符串。不漂亮，但它应该工作。但就像 BuddyJoe 说的，你到底想要完成什么

循环来自各种来源的 JSON 文件，并使用模板类型的方法来输出 C#、Java、SQL、Elixir 等的代码......我之前在其他地方写过这个语言，但现在将其移植到 javascript 我想知道 JSX 是否可以在模板中发挥作用。我喜欢像这样和 C#s Razor 这样的内联方法。

T4 诱人的 Microsoft 很不错...但非常特定于 Microsoft。希望做一些更“开放”和无处不在的事情（比如 JavaScript）

【参考方案1】：

如果您在浏览器中执行此操作，您可以执行类似的操作，然后获取安装时呈现的 <code> 元素的 textContent。我没有在服务器上使用过 React，但我猜你可以使用 ReactDOMSever's renderToString 然后创建一个简单的脚本，从你的字符串中删除开始和结束标签，你的代码在一个文本字符串中，你可以保存到使用节点的任何类型的文件。

var data = 
  class_name : 'User',
  method1Name: 'doSomething'



class MakeClass extends React.Component 
  componentDidMount()
     console.log(this.codeElem.textContent)
  

  render() 
     let json = this.props;
    return (
      <code ref=c=>this.codeElem=c>`

class $json.class_name 
  constructor() 
      // do something
  

  $json.method1Name() 
    // this method does something
  


      `</code>
    )
  


 ReactDOM.render(
    React.createElement(MakeClass, json: data), 
    document.getElementById('root')
  );

你可以在这里看到完整的东西： http://jsbin.com/rizaqifasi/edit?html,js,console,output