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={{width: '100px'}}。
或者
.... style={obj} ...
let obj={ width: '100px'; }
js的内容写在{}内。
如
{ /* 判断 */ this.state.something ? <div></div> : <div></div> }
