react_app 项目开发 (7)_难点集合

/src/App/Admin/Header

布局 import {Row, Col} from "antd"

</Row>

</Col>

</Row>

</div>

sysTime = Date.now() / DidMount 中计时器时间动态显示

天气接口 - jsonp 解决跨域

import jsonp from jsonp;

MyTools.weather(city){

return new Promise((resolve, reject)=>{

})

}

根据 path 获取到 breadcrumb_title 和父菜单

分类列表 - 增加分类 - 修改分类 ---- 熟练对 API 的运用能力

antd 界面 ---- Button、Icon、Card、Table(包含分页)

每个分类

parentId 一级分类的 parentId 为 0

_id 自动生成

name 新分类的名字

__v 自动生成

添加分类返回的响应

更新状态 state 是异步的，this.setState({...}, ()=>{...})

注意其第二参数是一个回调函数，在状态更新完成以后立即执行

对话框不保存上一次的交互记录，可以给 Modal 设置一下属性

关于 Table 的 render 传值

如果不指定 dataIndex，则第一个参数为整个对象

如果指定了 dataIndex，则第二个参数为整个对象，第一个参数为指定的数据

antd 的 Table 的分页器 pagination

后台分页，每次点击分页都发请求获取数据，即使已经获取过了

优化：保存每次请求的页码即数据

关键：数据结构；一般分页/搜索分页

this.props.history.push("新页面", 要传递的数据) ---- this.props.history.goBack()

可以在 "新页面" 获取到传递的数据

传递的数据 = this.props.location.state || {} // 优化：保证数据始终是一个存在的对象

yarn add react-draf-wysiwyg html-to-draftjs

git 上一个基于 react 的富文本编辑器

RichTextEditor.js

import React, { Component } from 'react';
import { EditorState, convertToRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';

// import {Card, Button, Icon, Table, message, Modal, Form, Input, Select} from "antd";

import "./css/RichTextEditor.css";

/* 富文本编辑器组件 */
export default class RichTextEditor extends Component {
    constructor(props){
        super(props);
        this.state = {
            editorState: EditorState.createEmpty()
        }
    }
    
    onEditorStateChange = (editorState) => {
        this.setState({
            editorState,
        });
    };
    
    render() {
        const { editorState } = this.state;
        return (
            <div>
                <Editor
                    editorState={editorState}
                    wrapperClassName="demo-wrapper"    /* 包裹区类名 */
                    editorClassName="demo-editor"    /* 编辑区类名 */
                    onEditorStateChange={this.onEditorStateChange}
                />
                {/*<textarea    // draft2html */}
                    {/*disabled*/}
                    {/*value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}*/}
                {/*/>*/}
            </div>
        );
    }
}

css/RichTextEditor.css

.product_edit  .rdw-dropdown-selectedtext{
    min-width: 54px;
    
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
}

.rdw-editor-toolbar {
    margin-bottom: 0;
}

.demo-editor {
    height: 120px;
    padding: 4px;
    
    font-size: 14px;
    line-height: 1.2em;
    letter-spacing: 0;
    background-color: #74878f;
}

使用：（组件对象，就是标签对象，意味着可以使用 ref 去关联获取组件中的属性和方法。）

获取富文本编辑器最终生成的，html 标签内容

getRichTextEditor = ()=>{
    const {editorState} = this.state;
    return draftToHtml(convertToRaw(editorState.getCurrentContent());
};

父组件给子组件设置 ref ，从而可以从子组件调用这个方法
编辑商品时，传递已有的 detail 给富文本编辑器显示

<div className="rich_text_editor">
    <div className="product_detail_edit">商品详情：</div>
    <div><RichTextEditor ref="RichTextEditor" detail={product.detail}/></div>
 </div>

默认创建的空文本内容

constructor(props){
    super(props);
    this.state = {
        editorState: EditorState.createEmpty()    // 默认创建一个空的文本内容
    }
}

使用第三方库，进行 html 到 draft 的转换

componentWillMount(){
    const detail = this.props.detail;
    if(detail){
        const blocksFromHtml = htmlToDraft(detail);    // 将传过来的 detail 转换
        const { contentBlocks, entityMap } = blocksFromHtml;
        const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
        const editorState = EditorState.createWithContent(contentState);
        this.setState({
            editorState    // 更新界面相关内容
        })
    }
}

最终的 RichTextEditor.js 组件代码为

import React, { Component } from 'react';
import { EditorState, convertToRaw, ContentState} from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from 'draftjs-to-html';

import htmlToDraft from 'html-to-draftjs';    // 将已有的 html 标签内容，生成一个 draft 内容

import "./css/RichTextEditor.css";

/* 富文本编辑器组件 */
export default class RichTextEditor extends Component {
    constructor(props){
        super(props);
        this.state = {
            editorState: EditorState.createEmpty()    // 默认创建一个空的文本内容
        }
    }
    
    onEditorStateChange = (editorState) => {
        this.setState({
            editorState,
        });
    };
    
    getRichTextEditor = ()=>{    // 让父组件调
        const {editorState} = this.state;
        return draftToHtml(convertToRaw(editorState.getCurrentContent()))
    };
    
    componentWillMount(){
        const detail = this.props.detail;
        if(detail){
            const blocksFromHtml = htmlToDraft(detail);    // 将传过来的 detail 转换
            const { contentBlocks, entityMap } = blocksFromHtml;
            const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
            const editorState = EditorState.createWithContent(contentState);
            this.setState({
                editorState    // 更新界面相关内容
            })
        }
    }
    
    render() {
        const { editorState } = this.state;
        return (
            <div>
                <Editor
                    editorState={editorState}    /* 初始显示文本的内容 */
                    wrapperClassName="demo-wrapper"    /* 包裹区类名 */
                    editorClassName="demo-editor"    /* 编辑区类名 */
                    onEditorStateChange={this.onEditorStateChange}    /* 监听，实时获取最新的输入内容 */
                />
                {/*<textarea    // draft2html */}
                    {/*disabled*/}
                    {/*value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}*/}
                {/*/>*/}
            </div>
        );
    }
}

通过 ref 可以得到标签对象

因为标签对象就是组件对象，所以 ref 就可以得到组件对象

意味着，父组件调用子组件的方法，可以 this.refs.ref关联的名字.方法

在 componentWillMount 可以直接 this.state.xxx = xxxNew

图片上传 - 删除上传图片 name
图片上传 ---- form-data ---- image - 选择文件

返回一个 data 包含了 name 和服务器资源路径url

删除上传的图片 ---- x-www-form-urlencoded ---- name - 图片文件名

antd 组件

管理图片的组件(上传/删除)

父组件给子组件传 imgs 图片数组，生成对引用的 fileList，并更新其在 state 中的状态

componentWillMount(){
    const imgs = this.props.imgs;
    if(imgs && imgs.length>0){
        const fileList = imgs.map((img, index)=>({
            uid: -index,
            name: img,
            url: "http://localhost:5000/upload/"+img,
            status: "done",
        }));
        this.setState({
            fileList
        })
    }
}    // 此时，可以看到已有的图片了