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

Question

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

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

但我也在使用带有 node 的 React 并使用react-starterify样板进行表达，这与 Node 的故事相同。

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

score 9 · Accepted Answer

要记住的一件事是 JSX 不是 HTML——它只是看起来像它。这很重要，因为 JSX 转译器（现在通常是 Babel）采用 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调用的语言或语法都可以很好地与 React 配合使用，只要您设置 Rails 资产管道，以便它正确地将转译作为服务资产的一部分。

有一个项目用 Jade 的语法来做这件事，叫做 react-jade；与普通 Jade和一些不支持的功能有一些不同，但它可能会做你想做的事。在 Rails 项目中，您需要找到或创建一个预处理器，将适当的 Jade 代码转换为特定于 React 的 JS。

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

现在我再次在我的组件中编写臃肿的 HTML

如果你只是在谈论 HTML 的语法，那没问题，但是如果你发现render你的 React 组件的方法变得越来越大并且难以管理，那么这可能是一个很好的迹象，你需要将你的组件分解成更小的组件（请参阅此链接中的“提示 4：拥抱构图！”）。

1 回答 1