react-基本使用

宁静致远 7/19/2020 react

变量、表达式
class style
子元素和组件

render() {
    return (
      <>
        {/* 变量 */}
        <div>{this.state.name} {this.state.age}</div>
        {/* 属性 */}
        <div>
            <img src={this.state.img} alt='' />
        </div>
        {/* 表达式 */}
        <div>{this.state.flag ? "显示" : "隐藏"}</div>
        {/* class */}
        <div className={titleStyle}>title</div>
        {/* style */}
        <div style={{'color':"red"}}>名称</div>
        {/* 原生html */}
        <p dangerouslySetInnerHTML={{__html:'<p>这是一段文字<i>斜体</i><b>粗体</b></p>' }}></p>
        {/* 加载组件 */}
        <List />
      </>
    );
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

复杂的多分支逻辑，收敛为一个函数，通过一个专门的函数来写分支逻辑，模版中只负责调用

JSX注意事项

目标任务: 掌握JSX在实际应用时的注意事项

JSX必须有一个根节点，如果没有根节点，可以使用<></>（幽灵节点）替代
所有标签必须形成闭合，成对闭合或者自闭合都可以
JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 class -> className for -> htmlFor
JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现

# 函数组件

使用 JS 的函数（或箭头函数）创建的组件，就叫做函数组件

// 定义函数组件
function HelloFn () {
  return <div>这是我的第一个函数组件!</div>
}

// 定义类组件
function App () {
  return (
    <div className="App">
      {/* 渲染函数组件 */}
      <HelloFn />
      <HelloFn></HelloFn>
    </div>
  )
}
export default App

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

约定说明

组件的名称必须首字母大写，react内部会根据这个来判断是组件还是普通的HTML标签
函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null
组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值就是对应的内容
使用函数名称作为组件标签名称，可以成对出现也可以自闭合

# 类组件

使用 ES6 的 class 创建的组件，叫做类（class）组件


// 引入React
import React from 'react'

// 定义类组件
class HelloC extends React.Component {
  render () {
    return <div>这是我的第一个类组件!</div>
  }
}

function App () {
  return (
    <div className="App">
      {/* 渲染类组件 */}
      <HelloC />
      <HelloC></HelloC>
    </div>
  )
}
export default App

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

约定说明

类名称也必须以大写字母开头
类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性
类组件必须提供 render 方法render 方法必须有返回值，表示该组件的 UI 结构

类组件总结

编写组件其实就是编写js类或者函数
定义状态必须通过state实例属性的方法，提供一个对象
修改state中的任何属性，都不可以通过直接赋值,必须setState方法，这个方法来自于集成得到

react react-条件判断

宁静致远的博客站点

Choose mode

react-基本使用

react-基本使用

# 函数组件

# 类组件