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不适用于无状态组件。它在the docs

中进行了解释

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

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

Answer 2

你也可以尝试使用recompose toClass。它有一个名为{{3}}的函数。

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

如果基本组件已经是一个类，它将返回给定的组件。

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

2 个答案: