Question

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

react-starterify

但我也使用React与节点并使用ColorMatrix matrix = new ColorMatrix(); matrix.setSaturation(0); ColorMatrixColorFilter filter = new ColorMatrixColorFilter(matrix); imgView.setColorFilter(filter);样板表达，它与Node的故事相同。

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

Answer 1

要记住的一件事是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调用，只要你设置了Rails资产管道以便正确地执行作为服务资产的一部分进行翻译。

是一个用Jade语法called react-jade执行此操作的项目;有a few differences from regular Jade和some unsupported features，但它可能会按照您的意愿执行。在Rails项目中，您需要找到或创建一个预处理器，将适当的Jade代码转换为特定于React的JS。

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

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

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

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

1 个答案: