什么＆＃34;无状态功能组件不能给予refs＆＃34;意思？

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)

我得到了：

  

警告：无状态函数组件不能给出refs（参见参考资料   ＆＃34; wrappedInstance＆＃34;在ProjectsSummaryLayout中创建   连接（ProjectsSummaryLayout））。尝试访问此参考将   失败。

它试图告诉我什么？我实际上做错了吗？

我看到有关此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有两种常用的组件样式。

• 功能组件
• 类组件

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

与功能组件对应的代码段

但是一旦我将其更改为Class Component，它就会起作用。

与Class Component对应的代码段。

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