"Stateless function components cannot be given refs" 是什么意思？

Question

我有这个：

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)

我得到：

Warning: Stateless function components cannot be given refs (See ref "wrappedInstance" in ProjectsSummaryLayout created by Connect(ProjectsSummaryLayout)). Attempts to access this ref will fail.

它想告诉我什么？我真的做错了什么吗？

我看到了关于这个的讨论here但不幸的是我根本不明白结论。

Answer 1

在 React 中，refs may not be attached to a stateless component。

React Redux 3 将 ref 附加到你给它的组件上不管它是否是无状态的。您看到的警告来自 React，因为在内部，React Redux 3 将 ref 附加到您提供的无状态组件 (ProjectsSummaryLayout)。

您没有做错任何事，根据 this GitHub comment，您可以安全地忽略警告。

在 React Redux 4 中，默认情况下没有 ref 附加到包装组件，这意味着如果您升级到 React Redux 4，警告应该消失.

Answer 2

React有2种常用的组件样式。

功能组件
Class 组件

所以，当我使用 Functional one 时，我遇到了这个错误。

功能组件对应的代码片段

但是当我将其更改为 Class 组件后，它就起作用了。

对应于 Class 组件的代码片段。

尝试将功能组件更改为 Class 组件。希望能解决您的问题。

"Stateless function components cannot be given refs" 是什么意思？

What does "Stateless function components cannot be given refs" mean?

javascript

reactjs

redux

react-redux