当前位置:  开发笔记 > 后端 > 正文

(Jade或Slim)类似于React的语法?

如何解决《(Jade或Slim)类似于React的语法?》经验,为你挑选了1个好方法。

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

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

但我也在使用React和节点并使用react-starterify样板表达,这与Node的故事相同.

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



1> Michelle Til..:

要记住的一件事是JSX不是HTML - 它只是看起来像它.这很重要,因为JSX转换器(现在通常是Babel)采用JSX语法并从中修改它:

Testing!

这样的事情:

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资产管道,以便它正确地将转换作为服务资产的一部分.

这里与翡翠的语法确实这个项目叫做反应玉 ; 有从普通翡翠有一些区别和一些不支持的功能,但它可能会做你想要做的事.在Rails项目中,您需要找到或创建一个预处理器,将适当的Jade代码转换为特定于React的JS.


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

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

如果您只是在谈论HTML的语法,那么没问题,但如果您发现renderReact组件的方法变得越来越大并且难以管理,那么您可能需要将组件分解为更小的组件(参见此链接中的"提示4:拥抱构图!").

推荐阅读
Life一切安好
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有