React 知识点

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

扫描二维码关注公众号，回复： 6428697 查看本文章

4、this.props.params 路由参数。React Router将路由的数据都通过props传递给了页面组件。

猜你喜欢