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>
}
原文地址:https://www.cnblogs.com/hiuman/p/7340563.html