react项目中遇到的一些问题

推荐使用facebook官方构建工具create-react-app来创建React基础工程。（然而我还是手动构建）

（路由）官方旧版本和V4的比较。https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md

 

欢迎补充！

正文：（react-router的版本是V4）

---

 提示No repository field 警告

解决办法：

1、在package.json中添加 "private": true 即可。

或者

2、在package.json中添加 repository 即可。如下。

"repository" : {
　　"type" : "git",
　　"url" : "https://github.com/npm/npm.git"
}

---

webpack的配置中，postcss报错的问题：也可以看官方文档。

解决办法：

1. 在webpack.config.js中使用 postcss-loader：

module.exports = {
　　module: {
　　    rules: [{
　　　　　　test: /.css$/,
　　　　　　exclude: /node_modules/,
　　　　　　use: [
　　　　　　　　{
　　　　　　　　　　loader: 'style-loader'
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　loader: 'css-loader',
　　　　　　　　　　options: { importLoaders: 1, }
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　loader: 'postcss-loader'
　　　　　　　　}
　　　　　　]
　　　　}]
　　}
}

2. 然后 新建 postcss.config.js 文件：

module.exports = {
　　plugins: [
　　　　require('precss'),
　　　　require('autoprefixer')
　　 ]
}

---

 try,catch,finally 中 return 的问题。（这个不算React的问题。逃。）

http://blog.csdn.net/kavensu/article/details/8067850

---

 编译不了React的问题。

webpack.config.js中判断js后缀的模块中添加：

query: {
　　presets: ['react']
}

或者 

新建.babelrc文件夹

{
　　"presets": ["react"]
}

---

旧版的Router已经更新为HashRouter。

// 原来写法：

import { Router } from 'react-router';

// 更新写法：

import { HashRouter } from 'react-router-dom';

---

Router里面只能有一个子元素。

可以使用<div></div>元素包住各个<Route/>

---

 IndexRoute。的写法。

  和路由嵌套。的写法。

原来的写法：

<Router history={hashHistory}>

　　<Route path='/' component={App}>

　　　　<IndexRoute component={Home}/>

　　　　<Route path='/city' component={City}/>

　　</Route>

</Router>

更新为：

<Router history={hashHistory}>

　　<Route path="/" component={(props) => (

　　　　<App {...props}>

　　　　　　<Switch>

　　　　　　　　<Route exact path='/' component={Home} />

　　　　　　　　<Route path='/city' component={City}/>

　　　　　　</Switch>

　　　　</App>

　　)}/>

</Router>

补充：Switch。

在访问地址和路由的配置一样时，只渲染第一个匹配的路由。

如这样的配置：

<Route path="/about" component={ About } />

<Route path="/:keyword" component={ Keyword } />

补充：jsx-spread（{...props}，设置对象的键值对作为JSX的属性）

https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes

---

 hashHistory的写法。

// 原来的写法：

import { hashHistory } from 'react-router'

// 更新写法：

import createBrowserHistory from 'history/createBrowserHistory'

const hashHistory = createBrowserHistory()

---

 路由参数 （路由规则）的问题。

// 原来写法：
<Route path='/search/:category(/:keyword)' component={Search}/>

// 但是，这样写无论是一个参数或是两个参数，都会匹配到404页面（前提写了404页面，没有写404页面则显示空白）。

// 分开写就没问题。

// 只写这句都能匹配，但是拿不到第二个参数的值
<Route path='/search/:category' component={Search}/>

// 只写这句只能匹配两个参数都有的路由，只有一个参数的路由匹配不了
<Route path='/search/:category/:keyword' component={Search}/>

---

 Link

// 原来写法：

import { Link } from 'react-router';

// 更新写法：

import { Link } from 'react-router-dom';

---

获取路由参数。

// 原来写法：

this.props.params.xx

// 更新写法：

this.props.match.params.xx

如：<Route path='/search/:category' component={Search}/>，

那么 this.props.match.params.category 即可拿到 category 的值。

又如：<Route path='/search/:category/:keyword' component={Search}/>

那么 this.props.match.params.category即可拿到 category的值。

        this.props.match.params.keyword可以拿到 keyword 的值。

---

 路由跳转。

// 忽略这种写法

// hashHistory.push('/')

// 路由变化成http://localhost:8000/，但是页面没有更新。

// 在这句后面添加以下这句即可。然后路由就变成http://localhost:8000/#/

// location.href = location.href;

或者

history是路由配置好的。（如果子组件中获取不了history，可以给子组件传参。）

this.props.history.push('/')

this.props.history.push('/search')

---

参数编码的问题。求解释。

this.props.history.push('/search/all/' + encodeURIComponent(value))

// 跳转后，地址栏上是未编码的文字。
// 在跳转前，打印出来的的确是编码了的文字。
// 将这个编码了的文字作为参数跳转路由
// 比如火锅

this.props.history.push('/search/all/' + '%E7%81%AB%E9%94%85')

// 跳转后，地址栏上也是未编码的文字。

---

JSX 语法。必须是驼峰命名（属性，事件，样式等等），以及属性名不能和 JS 关键字冲突，例如：className，readOnly，defaultValue等等。

例如：onClick，onKeyUp。

class属性改成className，因为class是关键字，不能使用。

input 的value属性要改成 defaultValue

---

标签必须是闭合标签。<biaoqian></biaoqian>或者<biaoqian/>

---

 在循环的时候需要添加key={...}来表示该元素是不重复的。

---

 return的内容至少是一个元素，如<div></div>。

---

props 属性，由父组件传入，永远是只读的，建议不要修改。

React是单向数据绑定。

主要用于数据的展示、父子组件的数据传递。

---

创建的组件名称首字母必须大写。

---

组件的style属性，要写成style={{ '100px'}}。

或者

.... style={obj} ...

let obj={
　　 '100px';
}

---

 js的内容写在{}内。

如

{
　　/* 判断 */
　　this.state.something
　　? <div></div>
　　: <div></div>
}