javascript - 无状态函数组件不能被赋予 refs

Question

我尝试访问组件中的一些引用。但是我在控制台中有这个错误。withRouter.js:44 警告:无法为无状态函数组件提供引用(请参阅 RegisterForm 创建的 FormInputText 中的引用“伪”)。尝试访问此引用将失败。

这是我的组件:

class RegisterForm extends React.Component {

  render() {
    return (
      <form action="">
        <FormInputText ref="pseudo"  type="text" defaultValue="pseudo"/>
        <input type="button" onClick={()=>console.log(this.refs);} value="REGISTER"/>
      </form>
    );
  }
}

另外，当我点击按钮时，我在控制台中得到了 Object {pseudo: null}。我期望一个对象而不是 null。

我不确定为什么这不起作用。请注意，我的 react 树使用 mobx-react。

Answer 1

Refs 不适用于无状态组件。在 the docs 中有解释

Because stateless functions don't have a backing instance, you can't attach a ref to a stateless function component.

无状态组件在编写时实际上有实例(它们在内部被包装到类中)但您无法访问它们，因为 React 团队将在未来进行优化。参见 https://github.com/facebook/react/issues/4936#issuecomment-179909980