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 自动生成

添加分类返回的响应

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

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

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

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

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

关于 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:;

    letter-spacing:;

}

.rdw-editor-toolbar {

    margin-bottom:;

}

.demo-editor {

    height: 120px;

    padding: 4px;

    font-size: 14px;

    line-height: 1.2em;

    letter-spacing:;

    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 组件

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

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

父组件给子组件传 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

        })

    }

}    // 此时，可以看到已有的图片了

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

需要在 handleChange 上传图片完成 file.status: done 时，进行 response 取值，赋值

难点：当用户上传图片/删除图片后，不进行保存，而是返回时，上传使得后台多了冗余数据，删除使得数据的丢失

解决：

1. 点击删除时，不是真的删除，而是保存删除的图片的名字到数组 deleteNames 中

---- 当点击 提交保存 时，再将之前保存的 deleteNames 发送请求，发送 ajax 请求真正地删除

2. 点击上传时，真的上传了，同时保存下上传的图片的名字到数组 fackNames 中

---- 当点击 返回 ← 时，发送 ajax 请求删除之前保存的 fackNames

难点：添加一条角色到后台，然后如何不发送获取列表的请求，来刷新页面

解决：通过 name 添加到角色到, 后台返回一个角色的相关信息，可以将这个 role 角色对象，存入 roles 状态中

如此的问题在于，优化：是 Component 始终在 setState 后 render

还是用 PureComponent + [...this.state.状态]去浅拷贝生成新状态来激活 render

秒客网

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

相关文章