Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

JSX 语法

发布于:  

JSX 是一个看起来很像 XMLJavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。

HTML 标签和 React 组件对比

React 可以渲染Rect组件也可以渲染HTML标签

  1. HTML 标签 在 JSX 里使用小写字母的标签名

    var myDivElement = <div className="foo" />;// 大写
    ReactDOM.render(myDivElement, document.getElementById('example'));
  2. React 组件 创建一个大写字母开头的本地变量

    var MyComponent = React.createClass({/*...*/});
    var myElement = <MyComponent someProperty={true} />; // 小写
    ReactDOM.render(myElement, document.getElementById('example'));

ReactJSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

不过需要注意的是classfor这两个属性,JSX语法最终是要被转换为纯Javascript的,所以要和在Javascript DOM中一样,用classNamehtmlFor

React.render(
    <label className="xxx" htmlFor="input">content</label>,
    document.getElementById('example')
);

还有一点是,在创建HTML标准内的元素时,JSX转化器会丢弃那些非标准的属性,如果一定要添加自定义属性,那么需要在这些自定义属性之前添加data-前缀。

<div data-custom-attribute="foo" />

命名空间式组件

让一些子组件可以作为一个父组件的属性

var Form = MyFormComponent;
 
var App = (
  <Form>
    <Form.Row>
      <Form.Label />
      <Form.Input />
    </Form.Row>
  </Form>
);

此特性在 v0.11 及以上可用.

Javascript表达式

JSX语法中写Javascript表达式只需要用 {} 即可 比如这样:

renderRoleList(roleList) {
    return (
      <div className="list-group">
        {
          roleList.map(role => {
            return <a href="##" className={cs("list-group-item", {active: role.id == 13})}>{role.name}
              <small className={s.roleDescribe}>({role.property})</small>
            </a>
          })
        }
      </div>
    )
}

不过要注意的是,JSX语法只是语法糖,它的背后是调用ReactElement的构造方法React.createElement的,所以类似这样的写法是不可以的:

// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>
 
// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

从上转换后结果可以看出这种写法是不行的,直接报语法错误了。

可以这样:

if (condition) <div id='msg'>Hello World!</div>
else <div>Hello World!</div>

Boolean 属性

省略一个属性的值会导致JSX把它当做 true。要传值 false 必须使用属性表达式。

// 在JSX中,对于禁用按钮这二者是相同的。
<input type="button" disabled />;
<input type="button" disabled={true} />;

// 在JSX中,对于不禁用按钮这二者是相同的。
<input type="button" />;
<input type="button" disabled={false} />;

注释

js注释是一样的, 不过需要用 {} 包围注释的部分

var content = (
<Nav>
    {/* 这是注释 */}
    <div>
      内容
    </div>
  </Nav>
)

JSX 陷阱

style 属性

jsx中写行内样式时 要这样写:

<button className="btn btn-primary" style={{marginLeft: '10px'}}>向右</button>

HTML 转义

jsx 默认会进行HTML转义,避免XSS攻击,不需要转义得这样:

var content='<strong>content</strong>';    
 
React.render(
    <div dangerouslySetInnerHTML={{__html: content}}></div>,
    document.body
);

参考资料

React 官方中文文档

厚颜一下 ~^_^~

赏赐