react系列--jsx

使用React，不一定非要使用JSX语法，可以使用原生的JS进行开发。但是JSX在定义类似HTML这种树形结构时，十分的简单明了。简明的代码结构更利于开发和维护。
从本质上讲，JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖。

• jsx代码

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

• 编译为

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

这很像vue里面的render函数

• 如果不存在子节点，你可以使用自闭合（self-closing）格式的标签。例如:

<div className="sidebar" />

• 编译为：

React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

• jsx代码

React.render(
    <div>
        <div>
            <div>content</div>
        </div>
    </div>,
    document.getElementById('example')
);

• 编译为

React.render(
    React.createElement('div', null,
        React.createElement('div', null,
            React.createElement('div', null, 'content')
        )
    ),
    document.getElementById('example')
);

HTML属性

注意：标签的属性class和for，需要写成className和htmlFor。因为两个属性是JavaScript的保留字和关键字。无论你是否使用JSX。

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

#不使用JSX
React.render(
    React.createElement('label', {className: 'xxx', htmlFor: 'input'}, 'content'),
    document.getElementById('example')
);

转化

• JS表达式

表达式用{}包起来，不要加引号，加引号就会被当成字符串。
JSX是HTML和JavaScript混写的语法，当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

• 解析变量

var str="hello"
React.render(
    <div>{str}</div>,
    document.body
);

//甚至

var arr=[1,2,3,4]
React.render(
    <ul>
          {arr.map(function(item){
                return <li>{item}</li>
          })}
    </ul>,
    document.body
);

• 属性表达式

React.render(
    <div className={2 > 1 ? 'class-a' : 'class-b'}>content</div>,
    document.body
);

• 子表达式

var Nav = React.createClass({
    render: function () {
        return <div>nav</div>
    }
});

React.render(
    <div>
        {2 > 1 ? <Nav/> : <div>div</div>}
    </div>,
    document.body
);

特别注意

• style属性

在React中写行内样式时，要这样写，不能采用引号的书写方式

React.render(
    <div style={{color:'red'}}>
        xxxxx
    </div>,
    document.body
);

• HTML转义

比如我们有一些内容是用户输入的富文本，从后台取到数据后展示在页面上，希望展示相应的样式

var content='<strong>content</strong>';

React.render(
    <div>{content}</div>,
    document.body
);

结果页面直接输出内容了：

A.png

React默认会进行HTML的转义，避免XSS攻击，如果要不转义，可以这么写：

var content='<strong>content</strong>';    

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

• 自定义HTML属性

如果在编写React过程中使用了自定义属性，React不会渲染的

React.render(
    <div dd='xxx'>content</div>,
    document.body
);

B.png

要想使用得这么写：

React.render(
    <div data-dd='xxx' aria-dd='xxx'>content</div>,
    document.body
);