使用 React / JSX 生成非 JavaScript 代码答案

【问题标题】：Using React / JSX for Non-JavaScript Code Generation使用 React / JSX 生成非 JavaScript 代码
【发布时间】：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）

标签： javascript reactjs code-generation jsx

【解决方案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

【讨论】：