“Stateless function components cannot be given refs”是什么意思？答案

【问题标题】：What does "Stateless function components cannot be given refs" mean?“Stateless function components cannot be given refs”是什么意思？
【发布时间】：2016-06-27 10:18:24
【问题描述】：

我有这个：

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)

我得到：

警告：无状态函数组件不能被赋予 refs（参见 ref ProjectsSummaryLayout 中的“wrappedInstance”由连接（项目摘要布局））。尝试访问此 ref 将失败。

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

我看到有关此here 的讨论，但不幸的是我根本不明白结论。

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案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，警告应该会消失。

【讨论】：

注意到 react-dnd 存在同样的问题。警告：无状态函数组件不能被赋予 refs。尝试访问此 ref 将失败。检查DragSource(Component)的渲染方法。

【解决方案2】：

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

功能组件
类组件

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

功能组件对应的代码sn-p

但是一旦我将它更改为类组件，它就可以工作了。

类组件对应的代码sn-p。

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

【讨论】：

这掩盖了问题，在这种情况下你应该使用React.forwardRef