vue设置标签自定义属性_如何扩展jsx的标签自定义属性，提供类似vue指令v-if , v-for的功能？...

一些开发者，特别是有使用过「模板技术」的开发者(例如 Handlebars)，刚开始尝试使用 React 编写应用时，可能会惊讶的发现，JSX 竟然没有内建支持类似其它模板引擎似的任何结构控制语句或指令。但这就是 JSX，它就是这么设计的，JSX 不是传统的模板，也不需要某个模板引擎去解析。大体上，可以将 JSX 看成普通 JavaScript 表达式的语法糖，JSX 其实比模板指令有「更强大灵活的表达能力」，但「声明式的模板」相较于「指令式的 JS」不少场景也确实会简单些。

如 @黑猫 的回答，在 React 中也是可以的，比如 JSX-Control-Statements，它为 JSX 增加了基本的结构控制语句，比如条件和循环控制语句。最终在编译阶段，通过 Babel 插件将「组件风格」的控制语句最终转换为普通 JS 代码，例如：

Hello World!

将会转换为

condition() ? 'Hello World!' : null

详细说明和用法，可参考这篇文章侯锋：通过 JSX Control Statements 编写 JSX​zhuanlan.zhihu.com

再进一步，在 React 中也是可以进行「双向绑定」的，比如结合 Mota，Mota 是一个主张「面向对象」的、支持「双向绑定」的 React 应用辅助库，基于 mota 你可以用纯 JavaScript 为应用编写完全面向对象的「业务模型」，并轻易的将「业务模型」关联到 React 应用中，例如：

有这样一个模型类

export default class User {

firstName = 'Jack';

lastName = 'Hou';

get fullName(){

reutrn `${this.firstName}${this.lastName}`;

}

}

那么，就可以这样进行绑定了

import { model,binding } from 'mota';

import React from 'react';

import ReactDOM from 'react-dom';

import User from './models/user';

@model(User)

@binding

class App extends React.Component {

render(){

const { fullName } = this.model;

return

{fullName}

;

}

}

ReactDOM.render(, mountNode);

详细说明和用法，可参考这篇文章侯锋：在 React 工程中利用 Mota 编写面向对象的业务模型​zhuanlan.zhihu.com