react项目开发中遇到的问题

前言

react+redux+router+ant ui +webpack

export * from 'x-module'在配置babel-plugin-transform-runtime插件下导致不可用

export * from 'x-moudule'

You may need an appropriate loader to handle this file type.

constants/index.js

export * from ...

通过google发现原来是babel-plugin-transform-runtime的bug导致，用的版本为*6.15.0*还没有修复。

defineProperty: "object/define-property"

"plugins": [
["transform-runtime", { "polyfill": false }]
]

react router Link不起作用

//App.jsx的render方法
render(){
return (
<MainLayout> //注意这个地方，MainLayout组件是作为Router的父组件
<Router history={history}>
<Route path="/" component={Home} />
<Route path="/dataSource/create" component={CreateForm} />
<Route path="/about" component={About} />
</Router>
</MainLayout>
);
}

//MainLayout的render方法
render(){
return(
<aside className="ant-layout-sider">
<div className="ant-layout-logo"></div>
<Menu mode={mode} theme="dark">
<SubMenu key="index_1">
<Menu.Item key="index_1_1">
<Link to="/dataSource/create">创建数据</Link>
</Menu.Item>
.
.
.
</Menu>
</aside>
)
}

Link.js:126 Uncaught TypeError: Cannot read property 'push' of undefined

使用Link组件必须作为react-router提供的Router组件的子组件，也就是说，Link必须位于Router内部，否则Link不起作用

this.context.router.push(_location);

如何优雅组织每个页面共有的部分，如导航和header、footer

render() {
const {layout, actions} = this.props;
return (
<div className={layout.collapse ? "ant-layout-aside ant-layout-aside-collapse" : "ant-layout-aside"}>
<Header userName={layout.userName}/>  //页面顶部header部分，抽取一个组件
<Aside collapse={layout.collapse} actions={actions}/> //页面左侧导航部分，抽取一个组件
<div className="ant-layout-main">
<div className="ant-layout-main-header"></div>
<div className="ant-layout-container">
<div className="ant-layout-content">
{this.props.children}    //MainLayout组件的所有子组件作为页面的主内容展示组件
</div>
</div>
</div>
</div>
);
}

MainLayout

render(){
return(
<MainLayout>
<div className="welcome-pic">
<div>欢迎来到xxx平台</div>
</div>
</MainLayout>
)
}

render(){
return (
<Router history={history}>
<Route path="/" component={MainLayout}>
<IndexRoute component={Home}/>
<Route path="/dataSource/list" component={DataSourceList} />
<Route path="/dataSource/create" component={QueryForm} />
</Route>
</Router>
);
}

使用react-router的browserHistory配置路由历史记录时刷新或者单独打开一个页面时出现NOT FOUND

hashHistory

browserHistory

createMemoryHistory

browserHistory

browserHistory

browserHistory

hashHistory

browserHistory

由于是单页面应用，而browserHistory是基于浏览器浏览记录来进行路由的，你刷新一个页面或者导航到某个页面的路由时，相当于新打开了一个单页应用，而要刷新或者要打开的页面是这个单页应用的第一个页面，这时这个新的单页应用还没有浏览记录，所以出现not found情况。

模块按需加载

require.ensure(["module-a", "module-b"], function(require) {
var a = require("module-a");
// ...
});

Todo

_onClick(){
let self = this;
let text = 'hello boy! welcome to the world of react!';
require.ensure(['../todos/Todo.jsx'], function(require){
var Todo = require('../todos/Todo.jsx');
self.Todo = Todo;
self.props.actions.setMessage(text);
})
// this.props.actions.setMessage(text);
}
render(){
let {welcomeText} =  this.props;
let Todo = this.Todo;
return(
<div>
<Button type="large" onClick={this._onClick.bind(this)}>获取欢迎词</Button>
<span>{this.props.welcomeText}</span>
{
Todo ? <Todo/> : ''
}

</div>
)
}

require.ensure

module-a

module-b

html-webpack-plugin与atool-build混用的坑

defaultValue与value相关的受控组件与非受控组件

调用组件的setState报警告

called setState() on an unmounted component

setState

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the LineSuggest component.

extends React.Component

isMount()

isMount()

componentDidMount

componentWillUnMount

componentDidMount(){
this.mounted = true; //flag
listener = document.body.addEventListener('click', ()=>{
if(this.mounted){
this.setState({open: false});
}
}, false)
}

componentWillUnMount(){
this.mounted = false; //重置flag
listener && document.body.removeEventListener('click', listener, false);
}

React.findDOMNode(component)

function isMounted (component) {
// exceptions for flow control :(
try {
React.findDOMNode(component);
return true;
} catch (e) {
// Error: Invariant Violation: Component (with keys: props,context,state,refs,_reactInternalInstance) contains `render` method but is not mounted in the DOM
return false;
}
};

未完待续