开发环境搭建步骤:
阿里项目实战:https://ant.design/docs/react/practical-projects-cn
坑1:
按照 阵营的规范,所有的组件数组必须绑定键在表中,dataSource
状语从句: columns
里的数据值都需要指定 key
。对于值 dataSource
默认将每列数据的 key
属性作为唯一的标识。
如果你的数据没有这个属性,使用务必 rowKey
来指定数据列的主键。若没有指定,控制台会出现以下的提示,表格组件也会出现各类奇怪的错误。
//比如你的数据主键是uid 返回<Table rowKey =“uid”/>; //或 返回<Table rowKey = {record => record.uid} />;
坑2:
//错误写法 <LI> {数字} </ LI> //正确写法 <li key = {number.toString()}> {数字} </ LI>
坑3:
组件所需要的外部引入有引入层级!
坑4:
解决办法:<为其添加一个空的ALT属性即可>
<img src = {require('../ assets / xxx.svg')} alt =“” />
坑5:
解决办法:<注释掉其中一个出口>
//(出品默认产品; 导出默认连接(({products})=>({ 产品, }))(产品);
坑6:
解决办法:<引入的文件中组件名称用驼峰命名法>
坑7:
解决办法如下:
坑8:
解决办法:
坑9:
解决办法:
坑10:
解决办法:
得到输入输入框用户输入的内容?
<input placeholder =“请输入数字”onChange = {handChange} /> 函数handChange(E){ 的console.log(e.target.value); }
得到某一元素<通过ID>的值:
让X = document.getElementById(“Input_value”).value;
直接在元素上为其添加样式:
<h1 style = {{textAlign:'center',fontSize:'30px',fontWeight:'bold'}}> Hello,world!</ h1>
获取URL参数:
this.props.match
只有有状态组件才可以使用REF属性!
为表添加唯一的Rowkey方式:
rowKey ='CGItemID'rowKey = {record => record.CGItemID}
直接在模型中获得需要的数据:
const {namespace:{ProjectData,...}} = this.props;
在遍历数组元素时Select.Option组件一定要添加值属性!
遍历数组的正确写法: