8

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

4

2 に答える 2

13

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

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

執筆時点でのステートレス コンポーネントは実際にはインスタンスを持っています (内部でクラスにラップされています) が、React チームが将来的に最適化を行う予定であるため、それらにアクセスすることはできません。https://github.com/facebook/react/issues/4936#issuecomment-179909980を参照してください。

于 2016-07-27T17:28:29.323 に答える
1

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

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

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

于 2016-07-27T19:25:09.137 に答える