使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用 (5)

2、父组件调用子组件方法（搜索组件，有两个地方使用到，首页和搜索页，其中首页不需要自动获取焦点，进入搜索页时需要自动获取焦点）
通过在搜索结果页里面获取搜索子组件的实例并调用foucs方法进行聚焦，从而不影响其他使用搜索组件的父组件状态

(1)子组件中定义foucs方法 focus(){ this.refs.keyword.focus(); } (2)设置input的ref属性 <input className='search-input' type="text" ref='keyword' onChange={this.appSearch.bind(this)} onFocus={this.onFoucs.bind(this)} placeholder="搜索应用" /> (3)父组件中调用foucs方法 componentDidMount(){ this.manualFocusInst.focus(); } <Search appSearch={this.appSearch.bind(this)} ref={(ref)=>this.manualFocusInst = ref} onCancel={this.onCancel.bind(this)} onFoucs={this.onFoucs.bind(this)} showCancelBtn={true}></Search>

3、react build的时候报错

throw new BrowserslistError('Unknown browser query `' + selection + '`')

解决办法是找到packpage.json里的browserslist，然后修改

"browserslist": [ "last 2 versions", "android 4", "opera 12" ],

build开启静态服务访问

npm install -g serve serve -s build

4、组件上面不能直接添加className，如
解决方式使用一个父div进行包裹

<div className='search-bar'> <Search onFoucs={this.onFoucs.bind(this)}></Search> </div>

5、ios 系统下img不显示问题，解决方案如下：

/*兼容ios不显示图片问题*/ img { content: normal !important }

6、1px问题，解决方案

/*伪元素1px*/ .row-cell:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e5e5e5; color: #e5e5e5; transform-origin: 0 0; transform: scaleY(0.5); z-index: 2; } 相关文档

https://react.docschina.org/
https://www.redux.org.cn/
https://react-redux.js.org/

https://mobile.ant.design

参考阅读

https://www.jianshu.com/p/8954e9fb0c7e
https://blog.csdn.net/z9061/article/details/84619309
https://www.jianshu.com/p/f97aa775899f
https://www.cnblogs.com/jack-liu6/p/9927336.html