Reactjs 为渲染方法定义变量的最佳策略答案

【问题标题】：Reactjs best strategy to define a variable for render methodReactjs 为渲染方法定义变量的最佳策略
【发布时间】：2015-08-15 00:09:52
【问题描述】：

假设我有这段代码，它根据某些条件定义组件@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，我会一直得到渲染，除了第一次。
我可以尝试定义函数
我可以在render 方法上精确定义@authComponent，但它看起来很脏。
我可以使用这样的构造：{div || <SignInForm />}，但它也不性感

有没有合适的方式来定义我的组件？

【问题讨论】：

标签： javascript coffeescript reactjs

【解决方案1】：

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

【讨论】：

好的，谢谢！如果您有时会找到更好的方法，请告诉我
请查看另一个对我有用的解决方案

【解决方案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

【讨论】：