128_React笔记2_JSX语法,组件书写方法
其他
2018-12-26 11:57:18
阅读次数: 0
一,JSX语法:
- 顾名思义:是一个看起来很像 XML 的 JavaScript 语法扩展
- 一种 JavaScript 的语法扩展,完全是在 JavaScript 内部实现的。
- 标签内的语法
- 表达式用{},例如:<h1>{1+1}</h1>
- 没有if和else,可以用三目运算符,例如:<h1>{i == 1 ? 'True!' : 'False'}</h1>
- 创建react组件用大驼峰,react组件实例化和html标签用小驼峰
- 小驼峰:var myDivElement = <div className="foo" />;
- 大驼峰:var MyComponent = React.createClass({/*...*/});
- 小驼峰:var myElement = <MyComponent someProperty={true} />;
- Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用
-
下面两种代码的作用是完全相同的:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
- 注释:
- 在标签内部的注释需要花括号
- 在标签外的的注释不能使用花括号
-
ReactDOM.render(
/*注释 */
<h1>孙朝阳 {/*注释*/}</h1>,
document.getElementById('example')
);
- 标签外的语法
- 行内样式:
- 属性是小驼峰,有联想,例如backgroundColor:'red'
-
-
<div style={{fontSize: '40px',color:'green'}}>
- 页内样式:
- 属性是小驼峰,没有联想,例如backgroundColor:'red'
-
-
import React, { Component } from 'react';
export default class States extends Component {
render() {
return (
<div style={{myStyle}}>哈哈</div>
)
}
}
var myStyle = {
fontSize: 50,
color: '#FF0000'
};
- 行内样式和页内样式共用
-
import React, { Component } from 'react';
export default class States extends Component {
render() {
return (
<div style={{myStyle,fontSize: '40px',color:'green'}}>哈哈</div>
)
}
}
var myStyle = {
fontSize: 50,
color: '#FF0000'
};
- 外部样式:属性是小横线连接,有联想
- 例如: background-color:'red'
-
二,组件
- 函数定义组件
-
定义:
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
使用:
{HelloMessage()}
- const使用组件
-
定义:
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
const element = <HelloMessage />
使用:
{element}
- class类定义组件
-
定义:
class Welcome extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
使用:
< Welcome />
转载自blog.csdn.net/a_horse/article/details/85112619