react(4)
一、Antd项目出搭建
通过参考Ant d
的相关API,我们使用Antd
的layout
与menu
等组件,构建了一个图书管理系统的基本页面。
我是antd参考链接
我们一边上截图,一边一步一步说:
(1) 建立目录:
说明:
- 增加
SiderPage.jsx
、HeaderPage.jsx
和component\ContentPage.jsx
- 采用大驼峰命名
(2)App.js文件修改:
可拷贝的代码为:
(3)以下po出SiderPage.jsx
、HeaderPage.jsx
和component\ContentPage.jsx
的代码:
SiderPage.jsx:
HeaderPage.jsx:
component/ContentPage.jsx:
(4) 运行效果:
二、解读React的props和state
首先关注ContentPage.jsx
(1)什么是props?
我们会想,既然中间的内容设置为了ContentPage.jsx,那么我们应该可以对中间的内容再进行细分
假如我有两个部分,一个叫做SearchPage,表示搜索框;一个叫做TablePage,表示一个表格区域,那么:
- 首先来建立这部分的内容,并且使用Antd的Grid栅格实现;
- 然后我们先删掉没有用的
Breadcrumb
部分。 - 然后对
SearchPage
和TablePage
的内容进行添加。
ContentPage.jsx:
下面是SearchPage.jsx
和TablePage.jsx
,在此仅列举一个:
界面如下:
Okay,看到这里,我们会想:
一个网站中肯定有很多个SearchPage,或者很多个TablePage,他们的内容基本相同,我怎么能提取公共的内容,让别的组件也可以复用呢?
Okay,既然有公共的内容,那么肯定也有独特的内容,我们可以暂时,狭义的把Props,理解成为这些独特的内容。
之所以叫做“狭义”,因为props并不只因为模板而存在,更多的是一种组件间传值的方法。
Okay,现在我们假设,SearchPage和TablePage需要显示的内容,就是像界面表示的那样,我们可以看到,独立的内容在这句话“ This is SearchPage , the subPage of ContentPage Created by Joker~!”中只有一个部分,就是文件的名称。
我们就拿SearchPage作为这个公共组件,先修改代码:
ContentPage.jsx:
这段代码修改的是什么意思呢?表示我们对这两个部分都使用了SearchPage.jsx
这个文件的模板,但是传入的参数pageName
是不相同的。
SearchPage.jsx:
所以总结如下:
(1)props是父组件用于向子组件传值的一种方式;
(2)在父组件中使用<FatherPage propsName={propsValue} />的方式进行传值;
(3)在子组件中,使this.props.propsName来获取到propsValue的值;
(4)这个值可以是json对象,可以是字符串,甚至可以是函数。
该部分的代码已经放在了GitHub上,地址为React/Demo03,感兴趣的朋友可以自己下载,但是不建议直接拷贝,可以自己尝试一下。
另外,上传部门没有Node_modules,需要的话,可以自己用npm命令下载。
原文:https://blog.csdn.net/wgh295360998/article/details/84201014