JSX 使用说明

JSX 是什么? 有哪些需要注意

JSX实际上是语法糖, 用xml标签Javascript代码, 看上去结构更加清晰
一般来说,在项目上线前要把jsx代码转换成纯js代码,gulp-reactreact-tools

JSX 需要注意关键词
由于classfor这两个html标签里的属性与Javascript关键词冲突, 所以需要用classNamehtmlFor代替

JSX 会丢弃非标准属性,所以自定义属性需要添加 data- 前缀

JSX 命名空间

一个组件有多个子组件,你希望这些子组件可以作为其父组件的属性,那么可以像这样用:

var Form = MyFormComponent;

var App = (
  
);

这样你只需将子组件的ReactClass作为其父组件的属性:

var MyFormComponent = React.createClass({ ... });

MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });

创建子元素可以直接交给JSX转化器:

var App = (
    React.createElement(Form, null,
        React.createElement(Form.Row, null,
            React.createElement(Form.Label, null),
            React.createElement(Form.Input, null)
        )
    )
);

JSX 不能使用if条件语句,会出现语法错误,可以使用三目运算符

// This JSX:
Hello World!
// Error: Is transformed to this JS: React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!"); // 可以从转化后的Javascript代码中看出明显的语法错误,所以要不用三目运算符,要不就这样写: if (condition)
Hello World!
else
Hello World!

JSX 使用...运算符

var props = { foo: x, bar: y };
var component = ;
// 这样就相当于:
var component = 

// 它也可以和普通的XML属性混合使用,需要同名属性,后者将覆盖前者:
var props = { foo: 'default' };
var component = ;
console.log(component.props.foo); // 'override'

你可能感兴趣的:(JSX 使用说明)