使用 rml(React Markup Language) 替代 jsx

很多人用不惯 react 是因为 jsx,其实 jsx 只是个构建虚拟 dom 的一种方式,我们还有其他选择,比如 rml.

语法

部分来自 wxml, 包括基本的 for/if/import/include 等,增加 import-component 用于引入外部 react 组件. 详见: rml readme.

搭配 webpack 使用

详见 https://github.com/yiminghe/rml-loader/tree/master/tests , 示例如下:

webpack.config.js

      {
        test: /\.rml$/,
        exclude: /node_modules/,
        loaders: ['babel-loader', `rml-loader?allowImportComponent`],
      }

index.js

import render from './index.rml';

const Page = React.createClass({
 getInitialState() {
   return {
        items: [
          {
            title: 'item1',
            content:'content of item1',
          }, {
            title: 'item2',
            content:'content of item2',
          },
        ],
      };
 },
 onClick() {
     console.log('onClick');
  },
  render(){
    return render.call(this, {
      state: this.state
    });
  }
});

index.rml

<import src="./item.rml" />
<div>
    <div r:for="{{items}}" r:key="title">
        <p>index: {{index}}</p>
        <template is="item" data="{{...item}}" />
    </div>
</div>

item.rml

<import-component name="{Card}" from="antd" />

<template name="item">
    <Card title="{{title}}" onClick="{{this.onClick}}">
        {{content}}
    </Card>
</template>
Advertisements

使用 rml(React Markup Language) 替代 jsx”的一个响应

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s