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