Ant Design Pro 运用点滴
没想到自己能跟AntDesignPro较劲这么久,学习嘛,较的时间越长学得东西就会越多。
同时发现,前两篇写得太不精致了。努力吧,只有学的越多,知道的越多,写出东西才能够清晰。
写个component
1. 为什么要用到component?
我也不整不明白,可能是因为有了component更容易复用。接触vue或者基于react的ant design pro,都不可避免的要用到component。既然大家都用,就一起用好了。
2. 在ant design pro下component大体样式
这个都可以看ant design pro下components目录怎么写的。
“百闻不如一见,百见不如试一下”
先看看大体代码,这个是我刚刚写的封装braft-editor的component。
//引入React,以及PureComponent
import React, { PureComponent } from 'react';
//引入BraftEditor以及相关样式
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/braft.css'
import styles from './index.less'
// Editor类继承PureComponent
class Editor extends PureComponent {
//在装载组件(mounting)之前调用会React组件的构造函数。
//当实现Component子类的构造函数时,应该在任何其他语句之前调用super(props)。
//否则,this.props将在构造函数中未定义,这可能导致错误。
//注意,const { value } = this.props;
constructor(props) {
super(props);
const { value } = this.props;
this.state = {
contentFormat: "html",
initialContent: value,
htmlContent: ""
}
this.editorInstance = null
}
//当Editor中内容发生改生时,
//注意,const { value, onChange } = this.props;
//因为基于ant design pro,在调用组件时,要使用的form提供getFieldDecorator方法,
//这个方法会向组件注入value参数,onChange方法,
//每次调用onChange方法都会去改变value,从而刷新整个组件。
//为什么会这样那,其实Ant Design 会在表单组件外层包裹一层组件,维护一个State值,
//每次onChange都是在改变外部state值,调用setState来刷新表单组件。
handleChange = (htmlContent) => {
const { value, onChange } = this.props;
this.setState({
htmlContent
});
onChange(htmlContent);
}
render() {
return ( <div className = { styles.editor } >
<BraftEditor initialContent = { this.state.initialContent }
forceNewLine onHTMLChange = {this.handleChange}
contentFormat = { this.state.contentFormat }
ref = {(instance) => { this.editorInstance = instance }}
/> </div>
)
}
//componentDidMount()在组件装载到DOM后立即调用。
//如果需要进行DOM节点的初始化则应该在这里来执行该逻辑。
//如果需要从远程端点加载数据(ajax),那么这是处理网络请求的最好地方。
//在此方法中设置state会去重新渲染DOM。
componentDidMount() {
}
componentWillMount() {
}
}
export default Editor;
3. 调用compoent
调用其实是比较简单的,首先import
,再使用就可以了。但是我们用到了ant design pro,中间还进行传值,就要麻烦一些。
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
Form,
Input,
Button,
Card,
Icon,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './style.less';
import Editor from '../../components/Editor';
const FormItem = Form.Item;
@connect(({ loading }) => ({
submitting: loading.effects['form/submitRegularForm'],
}))
@Form.create()
export default class Create extends PureComponent {
handleSubmit = e => {
e.preventDefault();
const { form, dispatch } = this.props;
form.validateFieldsAndScroll((err, values) => {
console.log(values);
if (!err) {
dispatch({
type: 'form/submitRegularForm',
payload: values,
});
}
});
};
render() {
const { submitting, form } = this.props;
const { getFieldDecorator, getFieldValue } = form;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
md: { span: 10 },
}
};
const editorItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
md: { span: 16 },
}
};
const submitFormLayout = {
wrapperCol: {
xs: { span: 24, offset: 0 },
sm: { span: 10, offset: 4 },
},
};
return (
<PageHeaderLayout
title="文章编辑"
content="文章的编辑及发布。"
>
<Card bordered={false}>
<Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
{/* 在这里我们要开始用到刚才写的Editor组件,注意initialValue这个函数是用到传值的,直接Editor内用value属性传值会报错 */}
<FormItem {...editorItemLayout} label="编辑区">
{getFieldDecorator('content', {
rules: [
{
required: true,
message: '请填写文章内容',
},
],initialValue:"我是传的值"
})(<Editor />)}
</FormItem>
<FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
<Button type="primary" htmlType="submit" loading={submitting}>
提交
</Button>
<Button style={{ marginLeft: 8 }}>保存</Button>
</FormItem>
</Form>
</Card>
</PageHeaderLayout>
);
}
}