前端React
文章平均质量分 50
香港胖仔
LiaoNing Technical University Information and Compute Science
展开
-
145、React实现电影列表页面(二)
这一篇来讲一下电影列表页面的详细页面具体是如何实现的首先我们看一下各个组件在页面上的布局是什么样子的作为MovieContainer 组件,主要使用Slider,Menu和Route等组件,将对应的模块导航到相应的页面上去这里涉及到路由规则的设置和inline 即html元素将块级元素变为内联元素,MovieContainerimport React from 'react'//布局相关的组件import { Layout, Menu, Icon }...原创 2020-07-05 18:58:05 · 847 阅读 · 0 评论 -
144、React实现电影列表页面
1、首先来看React实现电影列表的效果图是什么样子的2、下一步来看一下项目的结构如何:根目录下面有src文件夹src文件夹下components文件夹存放React组件的代码文件css 文件夹下面存放样式表还有App.jsx 为主组件,所以需要放在最外层index.html 为html页面,为的是引入main.js文件,main.js 文件为了使用主组件App.jsx,React项目js的入口文件...原创 2020-07-05 18:12:18 · 1140 阅读 · 1 评论 -
143、React.js的导航组件的使用
import React from 'react'import Home from './components/Home.jsx'import Movie from './components/Movie.jsx'import About from './components/About.jsx'// 导入日期选择组件import { DatePicker } from 'antd'//导入路由模块// HashRouter表示一个路由的根容器,将来,所有的路由相关的东西,都要包裹在.原创 2020-07-05 13:13:46 · 218 阅读 · 0 评论 -
142、Reactjs 组件的更新机制
import React from 'react'// prop-types包中职能很单一,只提供了一些常见的数据类型,用于做类型校验import ReactTypes from 'prop-types'//封装组件的目的,是为了团队协作开发更加方便,//有的人只负责开发组件,//有的人只负责调用别人开发好的组件 //最好在封装组件的时候,为组件中的一些必要数据,进行一个类型的校验export default class Counter extends React.Component {.原创 2020-07-05 13:09:34 · 457 阅读 · 0 评论 -
141、React.js 父组件向子组件共享数据
import React from 'react'import ReactTypes from 'prop-types'// 最外层的父组件// export default class Com1 extends React.Component {// constructor(props) {// super(props)// this.state = {// color: 'red'// }// .原创 2020-07-05 13:08:14 · 341 阅读 · 0 评论 -
140、React.js 组件的事件绑定和传参
import React from 'react'import ReactDOM from 'react-dom'export default class BindThis extends React.Component { constructor(props) { super(props) this.state = { msg: '这是默认的msg' } // 绑定this并传参的方式2: .原创 2020-07-05 13:05:43 · 260 阅读 · 0 评论 -
139、React.js的面向对象中的继承
class Person { constructor(name, age) { this.name = name this.age = age } say() { console.log('这是Person中的say方法') }}//使用extends实现继承,extends前面的是子类,后面的是父类 class Chinese extends Person { constructor(name, ag.原创 2020-07-05 12:58:59 · 186 阅读 · 0 评论 -
138、React.js之DOM的渲染方式
React创建虚拟DOM元素的方式一:使用React.createElement方法创建虚拟DOM,并使用ReactDOM.render方法进行渲染//这两个包名导入的时候,接受的成员名称,必须这么写import React from 'react' //创建组件,虚拟DOM元素,生命周期import ReactDOM from 'react-dom' //把创建好的组件 和虚拟DOM 放到页面上展示//2 创建虚拟DOM元素//参数1 创建的元素的类型,字符串,表示元素原创 2020-07-05 12:56:01 · 862 阅读 · 0 评论 -
137、React.js之编译打包的配置
一、React.js项目的打包和使用创建一个index.html文件,并且在这个文件中引入main.js的javascript程序文件,我们要做的就是编译生成main.js的javascript文件。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de原创 2020-07-05 12:11:37 · 1870 阅读 · 0 评论