web-dev-qa-db-ja.com

「ステートレス関数コンポーネントに参照を与えることはできません」とはどういう意味ですか？

私はこれを持っています：

const ProjectsSummaryLayout = ({projects}) => {
   return (
      <div className="projects-summary col-md-10">
          <h3>Projects</h3>
          <ul>
              { projects.map(p => <li key={p.id}>{p.contract.client}</li>) }
          </ul>
      </div>
   )
}

const ProjectsSummary = connect(
   state => ({projects: state.projects})
)(ProjectsSummaryLayout)

そして私は得る：

警告：ステートレス関数コンポーネントにはrefを指定できません（Connect（ProjectsSummaryLayout）によって作成されたProjectsSummaryLayoutのref "wrappedInstance"を参照）。このrefにアクセスしようとすると失敗します。

私に何を伝えようとしているのですか？私は実際に何か間違ったことをしていますか？

これについての議論があります ここ ですが、残念ながら私は結論を理解していません。

javascriptreactjsreduxreact-redux
40
GreenAsJade

Reactでは、 refsはステートレスコンポーネントにアタッチできません 。

React Redux3は、指定したコンポーネントにrefを付加しますに関係なくステートレスかどうか。表示される警告は、Reactによるものです。内部的には、React Redux 3はrefを指定したステートレスコンポーネント（ProjectsSummaryLayout）に付加します。

あなたは何も悪いことをしておらず、 this GitHub comment によれば、警告を安全に無視できます。

React Redux4）では、デフォルトではrefはラップされたコンポーネントに接続されません。つまり、=にアップグレードする場合React Redux 4、警告は消えるはずです。

27
Alex Booker

Reactには、よく使用される2つのコンポーネントスタイルがあります。

  • 機能部品
  • クラスコンポーネント

だから、機能的なものを使用していたときに、このエラーが発生していました。 error encountered when I was using functional component

機能コンポーネントに対応するコードスニペット

code for square component

しかし、クラスコンポーネントに変更するとすぐに機能しました。

it worked

クラスコンポーネントに対応するコードスニペット。

enter image description here

機能コンポーネントをクラスコンポーネントに変更してみてください。問題が解決することを願っています。

4
Divyanshu Rawat