Question

如何根据更改的哈希网址对反应类进行渲染？

这就是我的反应代码现在的样子：

module.exports = React.createClass {   render: () ->
    div {},
      div {},
        a { href: '#testhash' }, 'test link'
      div {},
        if (window.location.hash.substring(1) is 'testhash')
          'this is a test'
        else
          'this is a sentence'
}

但它只能工作一次（即第一个网址是什么 - 有或没有标签）。

我如何才能在点击时拾取url哈希值（点击href）？
即，点击test link，页面应该说this is a test而不是this is a sentence。

有没有更简单的方法来执行此操作而无需添加状态值和按钮功能？
我需要使用mixins吗？

Answer 1

您可以使用简单的mixin。 mixin在内部使用状态和事件侦听器，但是这不会暴露给您的组件。您的所有组件都知道两种公共方法：

this.getHash()→String
this.isHash(String)→Boolean

React.createClass {
  mixins: [HashMixin()]
  render: () ->
    div {},
      div {},
        a { href: '#testhash' }, 'test link'
      div {},
        if @isHash 'testhash'
          'this is a test'
        else
          'this is a sentence'
}

# provides getHash() to get the current hash
# provides isHash(hash) to test for equality with a hash
HashMixin = () ->
  getState = () -> {__hash: window.location.hash.slice(1)}

  getHash: () -> @state.__hash
  isHash: (hash) -> @state.__hash is hash
  getInitialState: getState

  componentDidMount: () -> 
    window.addEventListener 'hashchange', @__update_hash_state, false
  componentWillUnmount: () -> 
    window.removeEventListener 'hashchange', @__update_hash_state, false

  __update_hash_state: () -> @setState getState()

对于更严重的项目，您应该使用现有的路由库。最常见的反应是react-router。您也可以使用非特定的路由器作出反应，并使用mixin将它们连接到您的组件（例如导演或主干路由器）。

Facebook React基于url hash呈现不同的组件

1 个答案: