1、React JSX:React 使用JSX来替代常规的javaScript,它是一种JavaScript语法扩展。在React中使用JSX来描述用户界面。
2、一个组件类必须实现一个render方法,这个render方法必须要返回一个JSX元素。其中:
- 必须要有一个外层的JSX元素把所有内容都包裹起来,返回并列对个JSX元素时不合法的。
如:
render() { return ( <div>第一个</div> <div>第二个</div> ) }
编译会报错:
Adjacent JSX elements must be wrapped in an enclosing tag (18:0)(相邻的JSX元素必须包装在一个封闭的标签中)
正确写法是:
return ( <div> <div>第一个</div> <div>第二个</div> </div> )
- 在jsx中你可以插入JavaScript的表达式,表达式返回的结果会相应地渲染到页面上。要求表达式用{}包裹。
- 在jsx中不能使用if else语句,但可以使用conditional(三元运算)表达式来替代。
-
在React中推荐使用内联样式。我们可以使用camelCase语法来设置内联样式。如:
import React, { Component } from 'react' import PropTypes from 'prop-types'
const myStyle = { fontSize: 100, color: '#FF0000' } class Test extends Component { static propTypes = {} static defaultProps = {} state = {} render() { return ( <div> <h1 style = {myStyle}>测试</h1>, </div> ) } }
export default Test
3、React组件。我们可以使用函数定义一个组件,也可以使用ES6 Class来定义一个组件。
函数如:
function HelloMessage(props) { return <h1>Hello World!</h1>; }
ES6 class如:
class Welcome extends React.Component { render() { return <h1>Hello World!</h1>; } }
注:原生HTML元素名以小写字母开头,而自定义的React类名以大写字母开头,比如上面的HelloMessage,不能写成helloMessage
4、this.props.params 路由参数。React Router将路由的数据都通过props传递给了页面组件。