React + Dva 开发中 BUG 记录和超好用的组件

开发环境搭建步骤：

阿里项目实战：https：//ant.design/docs/react/practical-projects-cn

坑1：表格列数据值都需要添加唯一的 key

按照  阵营的规范，所有的组件数组必须绑定键在表中，dataSource 状语从句：  columns 里的数据值都需要指定  key 。对于值  dataSource 默认将每列数据的  key 属性作为唯一的标识。

如果你的数据没有这个属性，使用务必  rowKey 来指定数据列的主键。若没有指定，控制台会出现以下的提示，表格组件也会出现各类奇怪的错误。

//比如你的数据主键是uid 
返回<Table rowKey =“uid”/>; 
//或
返回<Table rowKey = {record => record.uid} />;

坑2：数组或迭代器中的每个 child  都应该有一个唯一的 key 

//错误写法
<LI> {数字} </ LI> 
//正确写法
<LI key = {number.toString()}> {数字} </ LI>

坑3：组件所需要的外部引入有引入层级！

坑4：React 中 img 标签需要一个目标 alt 属性！

解决办法：<为其添加一个空的ALT属性即可>

<img src = {require（'../ assets / xxx.svg'）} alt =“” />
require（'../ assets / xxx.svg'）} alt =“” />

坑5：react 只能 export 一次！

坑6：React 组件名的首字母必须为大写英文字母！

坑7：函数没有绑定父组件

解决办法如下：

坑8：所有预先引入/定义的常量/变量都必须放在组件连接 model 之前！

解决办法：

...
const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item;
//  找到相对应的 models.js 拿数据,其中的 project 指对应 models 中的 namespace
@connect(({project, loading}) => ({
    project,
    submitting: loading.effects['project/submit'],
}))

得到输入输入框用户输入的内容？

<input placeholder =“请输入数字”onChange = {handChange} /> 
handChange（E）{ 
  的console.log（e.target.value）; 
}

***React中三种函数调用方法总结：

方式一：内联调用法

import React, { Component } from 'react';
class func extends Component{
    constructor(porps){
        super(props);
    }
    funcOne(){
        console.log('内联调用法')
    }
    render(){
        return (
            <button onClick={this.funcOne.bind(this)}></button>
        )
    }
}

方式二：配置中调用法

import React, { Component } from 'react';
class func extends Component{
    constructor(porps){
        super(props);
        this.funcTwo = this.funcTwo.bind(this)
    }
    funcTwo(){
        console.log('配置中调用法')
    }
    render(){
        return (
            <button onClick={this.funcTwo}></button>
        )
    }
}

方式三：箭头函数调用法（最推荐）

import React, { Component } from 'react';
class func extends Component{
    constructor(porps){
        super(props);
    }
    funcThree:() => {
        console.log('箭头函数调用法')
    }
    render(){
        return (
            <button onClick={this.funcThree}></button>
        )
    }
}

得到某一元素<通过ID>的值：

让X = document.getElementById（“Input_value”）.value;

直接在元素上为其添加样式：

style={{border:'1px dashed #0083ff',width:66,height:32,textAlign:'center',paddingTop:4.5}}

获取URL参数：

this.props.match

只有有状态组件才可以使用REF属性！

为表添加唯一的Rowkey方式：

rowKey ='CGItemID'
rowKey = {record => record.CGItemID}

直接从 model 中获得需要的数据：

const {namespace：{ProjectData，...}} = this.props;

在遍历数组元素时Select.Option组件一定要添加值属性！遍历数组的正确写法：

<Select
    placeholder={getInput(fieldLabels.Industry,2)}>
    {IndustryVO && IndustryVO.length>0 ?IndustryVO.map(item => {return 
    <Select.Option key={item.Key} value={item.Key}>{item.Value}</Select.Option>}) : null}
</Select>)}

坑9：props和state 未定义！

解决办法：在需要调用的函数通过上面三种函数绑定的方法实现绑定

*React Table组件添加表头列点击事件：

 columns = [
     {
            title: <Button style={{borderWidth:0,backgroundColor:'#fafafa'}} 
            onClick={ record =>this.handleClick("Jan")} >Jan</Button>,
            dataIndex: 'Jan',
            align:'center',
            width: '7%',
      },
]

坑10：React Modal组件修复不能绝对居中的Bug:<例如>

style={{ left: -10 }}       // Remove 掉左边多出的10像素

坑11：在React中用如下写法有问题：

<Fragment id="XXX"></Fragment>
用document.getElementById('XXX')取不到Fragment这个Dom

---

给组件添加背景图片：

style={{marginTop:24,backgroundImage: "url(" + require("../../assets/BG.svg") + ")"}}

Table组件中分页器的设置方法<只有一页不显示>：

 pagination={{pageSize:10,hideOnSinglePage:true,...}}

复制文本内容：

//先为需要复制文本添加唯一的标识符ID
 <TextArea
     id="Json"
     autosize={{minRows: 5, maxRows: 10}}
 />
//点击复制
<Button onClick={()=> this.handleCopy}><Icon type="copy"/>复制</Button>}>
//按钮点击方法
handleCopy = () => {
      const Json= document.getElementById("Json");
      Json.select();
      document.execCommand("copy");
}

去掉输入框的自动完成功能<输入框会记录输入内容>:

<Input placeholder="请输入" type='text' autoComplete="off" />

*React Switch组件不能多次切换<valuePropName: 'checked',>：

<Col span={6}>
    <Form.Item label={fieldLabels.Freezen}>
         {getFieldDecorator('Freezen', {
              initialValue: userVO.Freezen,
              valuePropName: 'checked',
          })(<Switch
                 onChange={(checked) => this.handelChange(checked, 'Freezen')}
          />)}
    </Form.Item>
</Col>

让不能选择当前日期的日期：

//日期
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const nowDate = (year.toString() + '-' + month.toString() + '-' + day.toString());
//不能选择早于当前日期的日期
function DisabledDate(current) {
    return current && current < dateFormat(nowDate);
}
使用：
<DatePicker
    // disabledDate={DisabledDate}
    onChange={(date, dateStr) => {this.QuotationVO.ExpiryStartDate = dateStr;}}
/>

Table表头添加一个带有提示信息的Icon方法<text 展示的thead title 展示的提醒文字>：

const TooltipTitle = (text, title) => {
    return (
        <Fragment>
            <span style={{ marginRight: 8 }}>{text}</span>
                <Tooltip placement="top" title={title}>
                    <Icon type="question-circle" theme="outlined" />
                </Tooltip>
        </Fragment>
    );
};
//使用：
{
    title: TooltipTitle(LangMapping.A,LangMapping.B),
    dataIndex: "UnitPrice",
    align: "right",
    width: "86px",
    ...
}

日期格式化

import moment from 'moment';
function dateFormat(value) {
    if (value) {
        value = moment(value, 'YYYY-MM-DD  HH:mm');
        return value;
    } else {
        return null;
    }
}

日期格式化<精确到秒>

import moment from 'moment';
function dateFormatMin(value) {
    if (value) {
        value = moment(value, 'YYYY-MM-DD HH:mm:ss');
        return value;
    } else {
        return null;
    }
}