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里面只能有一个子元素。

可以使用

元素包住各个

 

---

 IndexRoute。的写法。

  和路由嵌套。的写法。

 

原来的写法：

　　

　　　　

　　　　

　　

更新为：

　　 (

　　　　

　　　　　　

　　　　　　　　

　　　　　　　　

　　　　　　

　　　　

　　)}/>

 

补充：Switch。

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

如这样的配置：

 

补充：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()

 

---

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

// 原来写法：


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

// 分开写就没问题。

// 只写这句都能匹配，但是拿不到第二个参数的值


// 只写这句只能匹配两个参数都有的路由，只有一个参数的路由匹配不了

 

---

 Link

// 原来写法：

import { Link } from 'react-router';

// 更新写法：

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

 

---

 

获取路由参数。

// 原来写法：

this.props.params.xx

// 更新写法：

this.props.match.params.xx

 

如：，

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

 

又如：

那么 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

 

---

 

标签必须是闭合标签。或者

 

---

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

 

---

 return的内容至少是一个元素，如

。

 

---

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

React是单向数据绑定。

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

 

---

 

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

 

---

 

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

 

或者

 

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

let obj={
　　width: '100px';
}

 

---

 js的内容写在{}内。

如

{
　　/* 判断 */
　　this.state.something
　　? 

　　: 

}