javascript - "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，警告应该消失。