JSX

Posted 2020-08-30

　js 创建一个标签

var link = <a href="xxx">Hello World!</a>; 相当于

var link = React.createElement(‘a‘, {href: ‘xxx‘}, ‘Hello World!‘)

加载组件第一个字母必须大写，必须有结束符号 <Hello></Hello> 顶层组件只能有一个（根节点只能有一个），当遇到< JSX当html解析，遇到{ JSX当js解析

注释

 {/* I am a child comment */}

JSX中使用样式

<p style={{width:‘100%‘,height:‘50px‘,‘-webkit-app-region‘: ‘drag‘,‘marginLeft‘:‘10px‘}}></p>
或 
var style = {
　　width:‘100%‘,
　　height:‘50px‘
}  <p style={style}></p>

命名空间

JSX 中还可以支持组件的命名空间，可以让组件的层次更清晰，更语义化。

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

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

JSX语法介绍

大括号里是javascript，不要加引号，加引号就会被当成字符串。

三元表达式

JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式.例如:

var person = <Person name={window.isLoggedIn ? window.name : ‘‘} />;

上述代码经过JSX编译后会得到：

var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ‘‘}
);

数组递归

数组循环,数组的每个元素都返回一个React组件。

var lis = this.todoList.todos.map(function (todo) {
  return  (
    <li>
      <input type="checkbox" checked={todo.done}>
      <span className={‘done-‘ + todo.done}>{todo.text}</span>
    </li>
  );
});

var ul = (
  <ul className="unstyled">
    {lis}
  </ul>
);

 

JSX中绑定事件

JSX让事件直接绑定在元素上。

<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>

和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称，大括号中仍然是标准的JavaScript表达式，返回一个事件处理函数。

React并不会真正的绑定事件到每一个具体的元素上，而是采用事件代理的模式：在根节点document上为每种事件添加唯一的Listener，然后通过事件的target找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件，React都会触发对应的事件处理函数。这就是所谓的React模拟事件系统。尽管整个事件系统由React管理，但是其API和使用方法与原生事件一致。

 

 

学习代码风格：https://zhuanlan.zhihu.com/p/21483570

https://www.w3ctech.com/topic/1884