react+antd---1

一：在 antd表格中向外传数据

eg:  
1.传个当前页面的函数
onClick={this.delete.bind(this.record.id)}

2.传到子页面

<Search  name={record.name}/>

在search页面获取  this.props.name

二：在antd模板中写JS代码

{""+js代码+""}

三：调用API获取数据后如果数据的传输少，则用state


四：当有循环获取数据时，首先判断是否为空或undefined

五：一般调用的API可以通过参数的多少，重复使用，若没有参数则写 ""


六：在通过API改变了数据后要重新获取数据，以便在界面更新


七：分页，添加，删除，修改（输入框，复选框，单选框，下拉菜单，树选择，日期选择，），获取（antd表格,直接获取单个数据）


分页：

删除:

修改：将antd中获取的数据放到一个对象中再通过get或POST方法传输   要根据需求判断输入的数据的长度，是否允许为空

添加：

获取：


八：调用API获取数据后，部分为数组，需要在antd代码中写三元表达式，分别获取数据

1.通过调用API获取数据的函数
2.显示 （通过API获取） 数据  的函数   先判断，再循环，  注意key  chialdren 之类的错误
3.获取  antd组件中数据 并放入state中 的函数，  获取数据时，要判断是否允许空值，输入是否合法


在要显示数据的函数中处理通过API获取的数据： 
if(data.length>0){}

antd的代码只接受数据，因此把对象放入数组


text record的区别


九：输入框（搜索框），复选框，单选框，下拉菜单（单选，多选），树选择，日期选择，表单，弹出框（删除数据时判断是否删除）




十：返回上一个页面仍然显示上一个页面选中的状态 



11：在路由中设置跳转页面，

link组件的to属性中加参数，在跳转后的页面取参数


12：双击表格中的一行跳转页面




npm start version5.1.5.1     -----------警告 （删除packg.json的version重新安装npm）


修改页面后无效果，  

0.代码是否写完，是否正确
1.查看路由是否正确
2.查看website/Areas/*/Views/ClientApp/Index.cshtml  的url地址是否正确
3.查看webpackconfig.js的输出路径是否正确   outputPath


<Link to="url">  url 设置   

（1）在 home层的rootRouter.js中设置path component
（2）在对应的组件文件夹中复制已个index.js，并重命名，将代码中的view设置为要跳转的页面
（3）<link to="/*/*/参数/参数../要跳转的页面名称">
 (4) 返回上一个页面 <link to="/*/*/对应的组件的文件夹名称">


配置 antd字体图标  将 antd-font文件夹复制到wwwwroot下，在Areas/*/Views/ClientApp/Index.cshtml中 引入 index.css