Coffeescript ReactJS：如何访问子组件的引用？

我正在用CoffeeScript编写代码，因为我一直在编写React with它。
这是基本结构

{ div, input } = React.DOM

Outer = React.createClass
  render: ->
    div { id: 'myApp' },
      Inner()

Inner = React.createClass
  render: ->
    input { id: 'myInput', ref: 'myInput' }

我在我的外部类上有一个

切换

方法，它是通过按快捷键触发的。它切换我的应用程序的可见性。
当我的应用程序从隐藏切换到显示时，我想专注于输入

现在，切换方法大致如下所示：

Outer = React.createClass
  render: ->
     ......

  hide: ->
    @setState { visible: no }

  show: ->
    @setState { visible: yes }

    $('#myInput').focus() # jQuery
    # I want to do something like
    # @refs.myInput.getDOMNode().focus()
    # But @refs here is empty, it doesn't contain the refs in Inner

  toggle: ->
    if @state.visible
      @hide()
    else
      @show()

---

那么我该怎么做呢？

在这种情况下，解决方案很简单，您可以告诉autofocus的输入，autofocus在渲染时对其进行聚焦

Inner = React.createClass
  render: ->
    input { ref: 'myInput', autoFocus: true }

通常，应将道具传递给内部构件，在中可以执行以下操作：

if @props.something
    @refs.myInput.getDOMNode().focus()

---

可以链接参照，因此，如果逐个参照拉动图元，可以在该图元内获取参照：

将

外部

类定义为

Outer=React.createClass
渲染：->
div{id:'myApp'}，
内部{ref:'内部'}

---

将允许您使用

@refs.internal.refs.myInput.getDOMNode（）

获取输入，以调用

焦点
 访问子组件的
refs
会破坏封装，因为
refs
不被视为组件API的一部分。相反，您应该在
internal
上公开一个可以由父组件调用的函数，调用它
focus
可能是有意义的

另外，在
componentdiddupdate
中聚焦元素以确保渲染完成：

{ div, input } = React.DOM

Outer = React.createClass
  render: ->
    div { id: 'myApp' },
      Inner({ref: 'inner'})

  componentDidUpdate: (prevProps, prevState) ->
    # Focus if `visible` went from false to true
    if (@state.visible && !prevState.visible)
      @refs.inner.focus()

  hide: ->
    @setState { visible: no }

  show: ->
    @setState { visible: yes }

  toggle: ->
    if @state.visible
      @hide()
    else
      @show()

Inner = React.createClass
  focus: ->
    @refs.myInput.getDOMNode().focus()

  render: ->
    input { id: 'myInput', ref: 'myInput' }

自动对焦不适合我。实际上，我只是考虑了一下componentdiddupdate，并尝试了一些与您建议的类似的东西，结果成功了。但我真的想知道是否有一种简单的方法可以访问子组件的引用。React Doc上的refs示例将输入放在顶部组件中，但实际上，输入通常嵌套在子组件中。refs仅在定义它们的组件中可用。如果任何子组件都可以访问它们，那么您必须假设您的ref名称不会与任何其他ref冲突。如果要删除或更改ref，您还必须检查所有其他组件。最好避免这些假设和到处寻找。谢谢你的回答，但我更喜欢@ssorallen的解决方案，它看起来更干净。