用react+antd+webpack+redux+MongoDB+express写博客问题集锦

1、server.js中设置views路径和模板

前提是先安装ejs插件

var ejs = require('ejs');
app.set('views', './view');     //设定页面目录
app.set('view engine', 'ejs');      //设置ejs引擎

express中默认ejs作为view引擎，若要改为HTML使用一下方法

app.engine('.html', ejs.__express);  //将默认ejs引擎改为HTML引擎
app.set('view engine', 'html');

2、子路由和父路由不在同一个页面时子路由的安放问题

需要子路由内容显示在哪个标签内时就可以把子路由放在那里，这好像是react-router-dom 4和之前的版本不同的地方，之前的版本是子路由嵌套在父路由里面，新版本可以将子路由剥离出来，这是本人当时在做的时候很令我头疼的地方（哈哈，本人比较笨，都别笑话哈），举个例子吧

index.js

ReactDOM.render(
<Provider store={store}>
<Router history={hashHistory}>
<Route path="/" component={App}/>   //父路由
</Router>
</Provider>,
document.getElementById("main")
);

需要将子路由内容显示在别的板块里

app.js

<Content className="content">
<Route path="/user/signup" component={Signup} />         //子路由1
<Route path="/user/login" component={Login} />           //子路由2
</Content>

3、render中存在if语句怎么办

可以用三目运算符，还有冒号前后如果有多个标签需要用一个标签将这些标签包起来，另外render里面的内容也必须用一个标签将它们包起来，举例说明

{
this.state.nickname==="" ? <span>您还未登录，请<Link to="/user/login">登录</Link></span> :
<span>
<span>你好，{this.state.nickname}</span>  
<span onClick={this.props.logout}>
退出
</span>
</span>
}

上述代码中“你好”和“退出”所在的span标签外若没有另一个外围span标签， 那里将会报错。

4、render中不能使用this.setState

因为每执行一次this.setState，render中都会重新渲染，渲染过程中又会重新执行this.setState，这样会陷入死循环。

5、路由向组件传值

同样举例说明：

<Route path="/blog/update/:id" component={Publish} />

组件Publish需要接收参数id，在组件Publish中可以这样获取this.props.match.params.id，当时无意中打印this.props才知道要这样获取。。。

6、页面跳转问题

（1）回退：this.props.history.goBack();

（2）跳转到指定页面：this.props.history.push(path);

有些方法不知道怎么用可以将其打印出来：console.log(this);

7、render中使用map方法罗列数组

（1）没有return的情况

{
arr.map(val => (<span>{val}</span>))
}

（2）有return的情况

{
arr.map(val => {
return <span>{val}</span>
})
}

8、render渲染的集中情况

（1）首次加载

（2）使用setState

（3）接收到新的props

9、如何支持对象展开运算符…

解构赋值也是ES6中的一个特性，我试了下只能用于数组，例如：

let [arg1,arg2,...arg3] = [1, 2, 3, 4];
arg1 //1
arg2 //2
arg3 //['3','4']

ES7中的对象展开运算符符可以让我们更快捷地操作对象：

let {x,y,...z}={x:1,y:2,a:3,b:4};
x; //1
y; //2
z; //{a:3,b:4}

由于ES7现在还没正式发布，所以需要通过babel进行转换，做法如下：

首先安装”babel-preset-es2015”，”babel-preset-react”，

“babel-preset-stage-3”，“babel-plugin-transform-object-rest-spread”，然后新建.babelrc文件，粘贴代码即可：

{
"presets": ["es2015", "react", "stage-3"],
"plugins": ["transform-object-rest-spread"]
}

10、如何通过Link传递参数

<Link to={{pathname:'/page1',state:data}}>点我</Link>

获取参数data：this.props.location.state

11、this.props的值

这些值有从父组件传递过来的，有从reducer传递过来的，任何组件使用connect(mapStateToProps,mapDispatchToProps)()后都会接收到来自reducer的state值。举例说明：

A页面被触发去改变state后进入B页面，B页面有两个组件，B页面上没有触发改变state，则B页面和这两个组件都会接收来自A页面的state，若A页面没有，则A页面的state来自A页面的上一个页面，以此类推。

如果不清楚每个页面获取的state可以在mapStateToProps中将其打印出来。

最后一个问题困扰了我很久，后来慢慢做多了才明白原来是那么回事，文章里面写的都是我通过上网查资料然后用在项目中一点一点领悟出来的，可能有理解的不对的地方，欢迎帮我指出来，但是不要骂我哈，本人很菜，求包容。

这是我GitHub上的博客代码，有需要的可以看看，不吝赐教。

https://github.com/1562428495/react-webpack-redux-MongoDB-express