• 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>
    }
  • 相关阅读:
    jquery-ui Sortable拖拽排序,刷新后保持排序后的位置
    JQ动态获取URL参数
    JQ简单点赞功能
    Netty源码分析 (九)----- 拆包器的奥秘
    Netty源码分析 (八)----- write过程 源码分析
    Netty源码分析 (七)----- read过程 源码分析
    Netty源码分析 (六)----- 客户端接入accept过程
    Netty源码分析 (五)----- 数据如何在 pipeline 中流动
    Netty源码分析 (四)----- ChannelPipeline
    Netty源码分析 (三)----- 服务端启动源码分析
  • 原文地址:https://www.cnblogs.com/hiuman/p/7340563.html
Copyright © 2020-2023  润新知