使用ref聚焦，但设置ref与条件

Question

<Editor
    {...other}
    {this.props.isFocus && ref={input => input && input.focus()} }
/>

上面的代码会有错误，如何根据父项传递的标志聚焦子组件？

Answer 1

你不能用这种逻辑来设置一个组件的道具。您可以改为执行以下操作之一：

<Editor
    {...other}
    ref={this.props.isFocus ? (input => input && input.focus()) : null}
/>

或

{this.props.isFocus ? <Editor
    {...other}
    ref={input => input && input.focus()}
  />
: <Editor {...other} />}

话虽如此，我不认为您正确使用ref。我认为只有在某些条件下有ref才有正当理由;无论你的应用程序逻辑如何，它都应该是一个静态的道具。

否则您最有可能错误地使用ref，但如果没有看到其他代码，为什么或怎么说很难。