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)

我得到：

警告：不能给无状态函数组件提供参考（请参阅 Connect(ProjectsSummaryLayout) 创建的 ProjectsSummaryLayout 中的参考“wrappedInstance”）。尝试访问此 ref 将失败。

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

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

Answer 1

在 React 中，refs不能附加到无状态组件。

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

您没有做错任何事情，根据此 GitHub 评论，您可以放心地忽略该警告。

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

Answer 2

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

• 功能组件
• 类组件

所以，当我使用功能性时，我遇到了这个错误。

功能组件对应的代码片段

但是，一旦我将其更改为类组件，它就起作用了。

类组件对应的代码片段。

尝试将功能组件更改为类组件。我希望它能解决你的问题。