（Jade或Slim）类似于React的语法？

Question

我已经习惯了使用slim和jade，最近我转向用React编写前端应用程序，并发现现在我在我的组件中再次编写臃肿的HTML。我目前使用Ruby on Rails和与巴贝尔.jsx文件等使用：

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

但我还使用与节点反应，快递使用react-starterify样板，它是相同的故事与节点。

有什么可以让我开始在React中使用类似slim或Jade的语法来编写我的html吗？

Answer 1

有一点要记住，JSX不是HTML--它看起来就像它。这很重要，因为JSX transpiler（通常巴贝尔这些天）主罚JSX语法，并从此改变它：

<div className="container"> 
    <p>Testing!</p> 
</div> 

到这样的事情：

React.createElement("div", { className: "container" }, 
    React.createElement("p", null, "Testing!") 
) 

通过抽象了React.createElement呼叫，可以结束了像r-dom一个项目，做同样的事情，但有一个更好的语法：

r.div({className: 'container'}, [ 
    r.p('Testing!'), 
]) 

或react-hyperscript ，允许某些属性的替代语法：

h('div.container', [ 
    h('p', 'Testing!') 
]) 

然而，由于JSX变成纯JS调用，可以转换成React.createElement调用任何语言或语法将工作的伟大与反应，只要你设置您的Rails资产管道，以便它能够正确进行作为服务资产一部分的转换。

There is这是一个用Jade的语法做这个的项目called react-jade;有a few differences from regular Jade和some unsupported features，但它可能会做你想做的事情。在Rails项目中，您需要查找或创建一个预处理器，将相应的Jade代码转换为特定于React的JS。

---

还有一两件事，我想根据你的问题中留言说：

我现在我的成分里写再次臃肿HTML

如果你只是在谈论HTML的语法然后没有问题，但是如果您发现React组件的render方法变得越来越庞大且难以管理，那么这可能是一个好兆头，表示您需要break your component into smaller components (see "Tip 4: Embrace composition!" at this link)。