1.前期准备
为了方便我直接使用的是Dva-cli脚手架搭建的React 框架开始学习,dva是一个还不错的脚手架集成了redux 和 react还是挺不错,具体使用可以查看他的文档
接着我就跟着官网来,因为dva 已经引入了react ,直接加入draftjs即可
2.安装
npm install –save draft-js
3.使用
新建components/MyEditor.js,修改为如下:
import React from 'react';
import {Editor, EditorState} from 'draft-js';
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
}
render() {
const {editorState} = this.state;
return <Editor editorState={editorState} onChange={this.onChange} />;
}
}
MyEditor.propTypes = {
};
export default MyEditor;修改roots/IndexPage.js如下:
import React, { Component, PropTypes } from 'react';
import MyEditor from '../components/MyEditor';
import { connect } from 'dva';
import { Link } from 'dva/router';
import styles from './IndexPage.less';
function IndexPage() {
return (
<MyEditor />
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);接着运行
npm start
浏览器打开 localhost:8989
你将看到一片空白,但是没事,现在你可以在最上面的空白处书写文字了,draftjs的基础运行环境算是搭建完成。
版权声明:本文为ohmyauthentic原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。