爱凉拌菜真是太好了

react 个人小项目开发question

发表于

React Component Lifecycle

https://solome.js.org/web/react/2016/11/30/react-lifecycle.html

React.createElement: type is invalid – expected a string or a class/function but got: undefined

resolution:

1
2
3
4
5
6
7
8
9
10
<Menu.Item key='logout' className='register'>
  <Button type="primary">{this.state.username}</Button>
  &nbsp;&nbsp;
  {/* <Link target='_blank'><Button type='dashed'>个人中心</Button></Link> */}
  <Button type="ghost">退出</Button>
</MenuItem>//error
:
<Menu.Item key='register' className='register'>
  <Icon type="appstore"/>注册/登录
</MenuItem>

to

1
2
3
4
5
6
7
8
9
10
11
12
...
const MenuItem = Menu.Item;
<MenuItem key='logout' className='register'>
  <Button type="primary">{this.state.username}</Button>
  &nbsp;&nbsp;
  {/* <Link target='_blank'><Button type='dashed'>个人中心</Button></Link> */}
  <Button type="ghost">退出</Button>
</MenuItem>
:
<MenuItem key='register' className='register'>
  <Icon type="appstore"/>注册/登录
</MenuItem>




resolution: change /src/root.js

1
2
3
4
5
6
7
8
<div>
  <MediaQuery query='(min-device-width:997px)'>
    <PCIndex />
  </MediaQuery>
  <MediaQuery query='(max-device-width:997px)'>
    <MobileIndex />
  </MediaQuery>
</div>

to

1
2
3
4
5
6
7
8
9
10
<Router>
  <div>
    <MediaQuery query='(min-device-width:997px)'>
      <PCIndex />
    </MediaQuery>
    <MediaQuery query='(max-device-width:997px)'>
      <MobileIndex />
    </MediaQuery>
  </div>
</Router>




how to modify themes of ant design via third-party or custom webpackConfig

resolution: change webpack.config.js to

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  test: /\.js?$/,
  exclude: /(node_modules)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['react','es2015'],
      // ant design  babel-plugin-import
      plugins: [['import',{'libraryName':'antd','style':true}]]
    }
  }
},
{
  test: /\.less$/,
  include: path.resolve(__dirname, './node_modules'),
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'less-loader',
      options: { // add less-loader option 'modifyVars' to change less var that defined in ant-design css
        modifyVars: {
          "primary-color": '#1da57a'
        }
      }
    }
  ]
}




loading static sources (images) with webpack

resolutions: add rules like this

1
2
3
4
5
6
7
8
9
10
11
{
  test: /\.(png|jpe?g|gif|svg)$/,
  exclude: /(node_modules)/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 8192,
      name: 'img/[hash:5].[ext]'
    }
  }
}

now can use require(...) or ‘import’ to load images by relative path in jsx;

how to use css media query in css-modules

https://npm.taobao.org/package/postcss-modules-values

cannot read videos of null

when map the this.state.videos
resolution:
add this.state={...} to constructor

1
2
3
4
5
6
7
8
9
10
11
constructor() {
}
to
constructor() {
  this.state= {
    videos: '';
  }
}

how to use Promise.all to fetch two urls simultaneously

refer to: https://segmentfault.com/q/1010000004101262/a-1020000004101642

how to use BMap with webpack

resolution:
add option externals to the end of webpack-config.js

1
2
3
4
5
6
7
8
module.exports = {
  ...
  entry...
  output...
  externals: {
    'BMap': 'BMap'
  }
}

and then import BMap from 'BMap' when you need;

where to find svg pics

pixabay.com

this.props.dispatch is not a function

when using react-redux to connect store and component;
resolution: explicitly return it yourself in mapDispatchToProps implementation;

1
2
3
4
5
const mapDispatchToProps = (dispatch,ownProps) => {
  return {
    "dispatch": dispatch,
  }
}

resolution:
dont use “connect” for Carousel contained components;

ant design Tabs animated lag during switch tabpane via big data

do not forget to call callback in the validator of Form.Item when you call this.props.form.validateFields or this.props.form.validateFieldsAndScroll with a Form.Item which contains a validator’s callback not called

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{getFieldDecorator('r_confirm',{
  rules: [{
    required: true, message: '请确认密码'
  },
  {
    validator: (rule, value, callback) => {
        if(value && value!==this.props.form.getFieldValue('r_password')) {
          callback('密码不一致')
        }
    }
  }
]
})(
  <Input type="password" placeholder='请确认您的密码' />
)}

is not equal to:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{getFieldDecorator('r_confirm',{
  rules: [{
    required: true, message: '请确认密码'
  },
  {
    validator: (rule, value, callback) => {
        if(value && value!==this.props.form.getFieldValue('r_password')) {
          callback('密码不一致')
        }
        callback()
    }
  }
]
})(
  <Input type="password" placeholder='请确认您的密码' />
)}

nodejs server router is in conflict with react-router BrowserRouter

resolution:
use HashRouter instead of BrowserRouter or manualy set histroyFallback
http://www.cnblogs.com/YZH-chengdu/p/6855237.html

textarea height auto increment

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(() => {
    // textarea height auto increment
    var textarea = document.getElementById('textarea');
    // hide scroll bar
    textarea.style.overflow = 'hidden';
    var height = parseInt(window.getComputedStyle(textarea).height);
    var width = parseInt(window.getComputedStyle(textarea).width);
    var autoHeight = function() {
        if(this.scrollHeight <= height || this.value == '') {
            this.style.height=height + 'px';
            return;
        }
        this.style.height = this.scrollHeight +  'px';
    }
    textarea.oninput = autoHeight;
    textarea.onpropertychange = function (event) {
        if(event.propertyName.toLowerCase() == 'value') {
            autoHeight();
            console.log(this.value);
        }
    }
})()