锚点是通过在界面中增加一些特征(比如 id),然后在 URL 地址后面加上 #id 就可以访问到指定页面的指定位置,这样可以让我们快速跳转到页面的某个位置,但是在 react-router 中这种方法遇到了问题,因为 react-router 会把 # 当做是 hash 来处理。导致即使跳转到指定页面后,# 后面的锚点也不生效。针对这个问题,在 react-router 的一个 issue 中大家也展开了激烈的讨论。以下是我看过以后整理的几种解决办法。

继续阅读

本文阐述了如何在一个使用了 react-router 的 react 项目中合理的使用 antd-mobile tabbar 功能。在 antd-mobile 官方的例子中可以看到,只需要将不同的组件放置到每个 TabBar.Item 里面就可以了,这样就可以实现简单的切换效果,但是存在几个问题。

一个是切换过程中,路由是不会跟着切换的。比如我们想分享一个地址,当其他人打开这个地址时自动就跳转到第二个 tab 上。如果按上面的方法做是无法实现的。

另外一个问题是这样的设计不太符合大型项目的框架设计,我们往往会制作一些 layouts,给不同的组件匹配不同的 layout。如果按上面介绍的方法做,也是不好实现的。

综合以上两点问题,再加上 Google 了一些资料后,写下本文,以帮助更多遇到类似问题的人。

解决方案

首先定义四个路由分别指定不同的 component,要注意的是这四个路由都统一使用一个 layout,这也就解决了一些大型项目中分多种 layout 的问题。如下代码所示:

<Router history={browserHistory}>
  {/* MainLayout 中包含了 antd-mobile tabbar */}
  <Route path='/' component={MainLayout}>
    {/* 默认跳转到 questions 页面 */}
    <IndexRedirect to='/questions' />
    <Route path='/questions' component={Questions} />
    <Route path='/activities' component={Activities} />
    <Route path='/videos' component={Videos} />
    <Route path='/mine' component={Mine} />
  </Route>
</Router>

随后我们看一下 mainLayout 的代码:

const MainLayout = ({children}) => {
  const pathname = children.props.location.pathname

  return (
    <TabBar
      unselectedTintColor='#949494'
      tintColor='#33A3F4'
      barTintColor='white'
    >
      <TabBar.Item
        title='问答'
        key='questions'
        icon={<div className='questions-icon' />}
        selectedIcon={<div className='questions-selected-icon' />}
        selected={pathname === '/questions'}
        onPress={() => {
          browserHistory.push('/questions')
        }}
      >
        { pathname === '/questions' ? children : null }
      </TabBar.Item>
      <TabBar.Item
        title='活动'
        key='activities'
        icon={<div className='activities-icon' />}
        selectedIcon={<div className='activities-selected-icon' />}
        selected={pathname === '/activities'}
        onPress={() => {
          browserHistory.push('/activities')
        }}
      >
        { pathname === '/activities' ? children : null }
      </TabBar.Item>
      <TabBar.Item
        title='视频'
        key='videos'
        icon={<div className='videos-icon' />}
        selectedIcon={<div className='videos-selected-icon' />}
        selected={pathname === '/videos'}
        onPress={() => {
          browserHistory.push('/videos')
        }}
      >
        { pathname === '/videos' ? children : null }
      </TabBar.Item>
      <TabBar.Item
        title='我的'
        key='mine'
        icon={<div className='mine-icon' />}
        selectedIcon={<div className='mine-selected-icon' />}
        selected={pathname === '/mine'}
        onPress={() => {
          browserHistory.push('/mine')
        }}
      >
        { pathname === '/mine' ? children : null }
      </TabBar.Item>
    </TabBar>
  )
}

这里重点的代码就是 pathname === '/questions' ? children : null,根据当前路由判断加载不同的 component,并且在点击任何一个按钮的时候,自动跳转到指定的路由上。其中 selected 属性也根据路由动态的变换样式。路由传递给 mainLayout 是一个 children,这个 children 中就包含了组件的信息,我们根据路由的不同加载即可。

总结

这样处理后无论我们直接访问 URL 还是点击 tabbar 下面的任意按钮,不但可以切换页面,路由也会随之变动。最重要的是我们套用了 layout,让项目看起来更加合理。

Fetch API cannot load http://v.juhe.cn/toutiao/index?type=&key=9ac9a526985bbd20fa150784********. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

这个错误困扰了我很久,导致无法从网络获取数据,现在很多接口都是 json 或 jsonp 的方式,如果不能用 fetch 或者一些网络请求的方法,简直太受罪了,有些朋友的解决方法是把数据放到自己的服务器上来处理,这莫名的是给自己增加工作量,直到我看到了这篇文章,终于将这个难题解决:http://www.jianshu.com/p/19a6aefca350

继续阅读

highstocks 是一个功能强大且丰富的股票资讯类图表的库,其具有代表意义的项目还有 highcharts 和 highmaps。我最近在做一个股票资讯类的项目,所以需要用到这个图表库,由此篇文章开张记录下使用该库的各种问题和小技巧。方便以后他人遇到问题及时解决。首先我们就来谈一谈如何在 react 项目中使用它。

继续阅读

emmet 是一个非常强大的 html 代码编写助力插件在项目开发的时候非常实用,需要手写几行的代码用 emmet 一行就搞定了。emmet 的具体用法就不做本文介绍,有兴趣的可以自己去 emmet 官网看看介绍。由于它仅在 .html 文件中可以使用,而 React 等前端框架都是在 .js 或 .jsx 文件内写 html 代码。所以有些时候就不奏效了。本文就是介绍如何做 .js/.jsx 文件中使用 emmet 编写 html 代码。

继续阅读

这几天看 Redux 的资料看的简直发疯,每次都看到睡着。今天下午睡了整整 4 个小时,在今晚安静的时候攻坚了一下 Redux。幸亏网上有很多靠谱的资料,不然我也不知道何时能搞清楚 Redux 的作用。下面罗列一下相关资料:

周边资料

创建 webpack+react+redux 的项目模板

react-redux-starter-kit: https://github.com/davezuko/react-redux-starter-kit

webpack-react-redux: https://github.com/jpsierens/webpack-react-redux

继续阅读