我已经习惯了使用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吗？
要记住的一件事是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:拥抱构图!").
京公网安备 11010802040832号 | 京ICP备19059560号-6 