react学习（3）-jsx语法

2019独角兽企业重金招聘Python工程师标准>>>

深入JSX

JSX是一个JavaScript语法扩展，类似于XML。你可以使用React，可以进行JSX语法到JavaScript的转换

Why JSX?

react不是必须使用JSX。你可以使用普通的JS。然而，我们建议使用JSX因为它定义树结构（dom）简洁而且是我们熟悉的语法。简明的代码结构更利于开发和维护。 XML有着开闭标签，在构建复杂的树形结构时，比函数调用和对象字面量更易读。

HTML Tags vs. React Components

react可以渲染HTML标签（字符串）或react 组件（类）。渲染一个HTML标签，JSX只使用首字母小写标签名称：

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

要渲染一个react组件，只需创建一个首字母大写的局部变量：

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

react使用首字母大小写的惯例区分本地组件和html标签例如：

<Person/>(这是react组件)
<p>这是html标签</p>

jsx中原有的javascript的保留字都不能使用，例如：class,for必须使用className,htmlFor;

JSX并不是新语言，也没有改变JavaScript的语法，只是对JavaScript的拓展。

//使用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')
);

jsx transform

React JSX从类似于xml的语法转换成javascript。xml的元素，属性和子节点转换成参数传入React.createElement方法

var Nav, Profile;
// 输入(JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// 转换后(JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);

JavaScript 表达式

使用JavaScript表达式为一个属性值，将表达式写在一对花括号（{}）中代替双引号（“”）。

// Input (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// Output (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

布尔型属性

// These two are equivalent in JSX for disabling a button
<input type="button" disabled />;
<input type="button" disabled={true} />;

// And these two are equivalent in JSX for not disabling a button
<input type="button" />;
<input type="button" disabled={false} />;

子表达式

// Input (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// Output (JS):
var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

注释

在JSX添加注释是很容易的；他们只是JS表达式。当你在一个标签区域内，你只需要小心地把{ }放在注释的周围。如下：

var content = (
  <Nav>
    {/* 我是注释, 使用{} 包围着*/}
    <Person
      /* 我是
         多行
         注释*/
      name={window.isLoggedIn ? window.name : ''} //结尾处注释
    />
  </Nav>
);

jsx是类似于html但是不完全相同，但是还是有不同的地方

JSX解构赋值

如果提前就知道了组件的属性的话，写起来很容易。例如component组件有两个动态的属性foo和bar：

var component = <Component foo={x} bar={y} />;

而实际上，有些属性可能是后续添加的，我们没办法一开始就确定，我们可能会写出下面不好的代码：

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad

这样写是错误的，因为我们手动直接添加的属性React后续没办法检查到属性类型错误，也就是说，当我们手动添加的属性发生类型错误时，在控制台是看不到错误信息的。

在React的设定中，初始化完props后，props是不可变的。改变props会引起无法想象的后果。

解构属性

为了解决这个问题，React引入了解构属性，其实就是es6的语法实现具体看：这里

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

你可以使用结构赋值方式和普通的方式混合使用，但如果碰到同名的属性的时候后者覆盖前者的属性如下：

 var props = { foo: 'default' };
  var component = <Component {...props} foo={'override'} />;
  console.log(component.props.foo); // 'override'

JSX 陷阱

HTML 实体

｛/*
正常显示
First · Second
*/｝
<div>First &middot; Second</div>
｛/*
显示异常
First &middot; Second
*/｝
<div>{'First &middot; Second'}</div>

那应该怎么办呢？

1.使用unicode编码

2.String.fromCharCode(183)

3.使用属性：dangerouslySetInnerHTML如：<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

自定义HTML属性

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

html中没有发现有dd属性

要想使用请在属性前面添加data-

style属性

在React中写行内样式时，需要写在双大括号中（{{}}），不能采用引号的书写方式

React.render(
    <div style={{width:'100px',height:'100px;',display:'block'}}>
        xxxxx
    </div>,
    document.getElementById('example')
);

 

转载于:https://my.oschina.net/duanyunhu/blog/751966