Question

假设我有这段代码，根据某些条件定义组件@authComponent：

@AuthPanel = React.createClass
  componentWillReceiveProps: ->
    @authComponent =  if @props.uiState.auth_panel?.signed_in
                        <SignOutForm uiState={@props.uiState} socket={@props.socket} />
                      else
                        <SignInForm uiState={@props.uiState} socket={@props.socket} />

  render: ->
    <div className="navbar-collapse">
      {@authComponent}
    </div>

我遇到的主要问题是难以理解我应该在哪里定义@authComponent变量。

以下是我的想法列表：

我首先尝试使用componentWillMount，但我遇到了麻烦 - @authComponent只调用了一次。
如果我尝试componentWillReceiveProps，我会在任何时候都进行渲染，除了第一次。
我可以尝试定义函数
我可以在@authComponent方法上完全定义render，但它看起来很脏。
我可以使用这样的结构：{div || <SignInForm />}，但它也不性感

有没有合适的正确方法来定义我的组件？

Answer 1

将@authComponent置于render()方法中并没有什么不好和肮脏。我在GitHub上看到了很多使用相同方法的例子。在我认为的情况下，组件的创建并没有对性能产生很大的影响，因为只有在组件树中发现一些更改时，React才会修改DOM。

Answer 2

在我看来，这个解决方案更好：

@AuthPanel = React.createClass
  getAuthComponent: ->
    if @props.uiState.auth_panel?.signed_in
      return <SignOutForm uiState={@props.uiState} socket={@props.socket} />
    else
      return <SignInForm uiState={@props.uiState} socket={@props.socket} />
  render: ->
    <div className="navbar-collapse">
      {@authComponent()}
    </div>

我在那里找到了它：https://github.com/planningcenter/react-patterns#sub-render

Reactjs为render方法定义变量的最佳策略

2 个答案: