web-dev-qa-db-ja.com

ステートレス関数コンポーネントに参照を与えることはできません

コンポーネント内のいくつかの参照にアクセスしようとしています。しかし、コンソールにこのエラーがあります。 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のオブジェクトを期待します。

これが機能しない理由がわかりません。私のreactツリーはmobx-reactを使用していることに注意してください。

javascriptreactjsmobx
7
dagatsoin

参照はステートレスコンポーネントでは機能しません。それは ドキュメント で説明されています

ステートレス関数にはバッキングインスタンスがないため、ステートレス関数コンポーネントに参照をアタッチすることはできません。

執筆時点でのステートレスコンポーネントには実際にはインスタンスがあります（内部でクラスにラップされています）が、Reactチームが将来最適化する予定であるため、アクセスできません。 を参照） https://github.com/facebook/react/issues/4936#issuecomment-17990998

12
Alik

recompose を使用してみることもできます toClass という関数があります。

関数コンポーネントを受け取り、それをクラスにラップします。これは、Relayなどのコンポーネントに参照を追加する必要があるライブラリのフォールバックとして使用できます。

基本コンポーネントがすでにクラスである場合は、指定されたコンポーネントを返します。

1
Julius Breckel