无状态函数组件不能给出refs

Question

我尝试访问我的组件中的一些引用。 但我在控制台中有这个错误。 withRouter.js:44 Warning: Stateless function components cannot be given refs (See ref "pseudo" in FormInputText created by RegisterForm). Attempts to access this ref will fail.

这是我的组件：

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 。

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

Answer 1

Refs不适用于无状态组件。 它在文档中解释

由于无状态函数没有后备实例，因此无法将ref附加到无状态函数组件。

写作时的无状态组件实际上有实例（它们被内部包装到类中）但是你无法访问它们，因为React团队将来会进行优化。 请参阅https://github.com/facebook/react/issues/4936#issuecomment-179909980

Answer 2

您也可以尝试使用重构它有一个名为toClass的函数。

获取一个函数组件并将其包装在一个类中。 这可以用作需要向组件添加ref的库的后备，如Relay。

如果基本组件已经是类，则返回给定的组件。