Facebook React 基于 url 哈希渲染不同的组件

Question

如何根据更改后的散列 url 使反应 class 呈现？

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

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 是什么 - 有或没有主题标签）。

我怎样才能使 url 散列更改（单击 href）在单击时被拾取？
也就是说，然后单击 test link，页面应该显示 this is a test 而不是 this is a sentence。

有没有更简单的方法可以做到这一点而无需添加状态值和按钮功能？
我需要使用 mixins 吗？

Answer 1

您可以为此使用一个简单的 mixin。 mixin 在内部使用状态和事件侦听器，但是这不会暴露给您的组件。您的组件只知道两个 public 方法：

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 最流行的是 react-router。您还可以使用不特定于反应的路由器，并使用混合线将它们连接到您的组件（例如 director 或 backbone 的路由器）。

Facebook React 基于 url 哈希渲染不同的组件

Facebook React to render different components based on url hash

javascript

coffeescript

reactjs