Reactjs React的（Jade或Slim）类语法？

我已经习惯了使用slim和jade，最近我开始使用React在前端编写应用程序，发现现在我又在组件中编写臃肿的HTML了。我目前正在使用Ruby on Rails和.jsx文件与babel等一起使用：

gem 'react-rails', '~> 1.4.0'
gem 'react-router-rails', '~>0.13.3.2'

但我也在使用React with node和express，使用

React starterify

样板文件，node的情况也是如此

---

有什么东西可以让我开始用slim或Jade这样的语法在React中编写html吗？

需要记住的一点是，JSX不是html，它只是看起来像。这一点很重要，因为JSX transpiler（现在通常是Babel）采用JSX语法并根据以下内容对其进行修改：

测试

对这样的事情：

React.createElement（“div”，{className:“container”}，
createElement（“p”，null，“Testing！”）
)

通过对

React.createElement

调用进行抽象，您可以得到一个类似的项目，该项目的功能相同，但语法更好：

r.div（{className:'container'}[
r、 p（‘测试’），
])

或者，允许对某些属性使用替代语法：

h（'div.container'[
h（'p'，'Testing！'）
])

但是，由于JSX变成了普通的JS调用，任何可以转换为

React.createElement

调用的语言或语法都可以很好地与React配合使用，只要您设置Rails资产管道，使其正确地作为服务资产的一部分进行传输

有一个项目使用Jade的语法来实现这一点；有和，但它可以做你想做的事。在Rails项目中，您需要找到或创建一个预处理器，将适当的Jade代码转换为特定于React的JS

---

根据你问题中的评论，我还想提一件事：

现在我又在我的组件中编写臃肿的HTML了

---

如果你只是在谈论HTML的语法，那么没问题，但是如果你发现React组件的

render

方法变得越来越大并且难以管理，那么这可能是一个好迹象，你需要这样做。

你可能想尝试React.rb（reactrb.org）而不是你想要的，但也许更好？最后一段是+1，尽管我想知道应该走多远。由于它都被包装到JS代码中，所以它的效率并不是非常低，但必须有一个停止分解的点。（在这里插入一个老笑话。）我自己正在学习React，实际上我非常喜欢组件和组成的基本概念。但是，我也同意原来的海报：对于标记，我讨厌HTML。恨恨恨。我喜欢斯利姆。因此，能够在组件内部实现超薄功能仍然是一个好主意。