What does “Stateless function components cannot be given refs” mean?

Question

I have this:

const ProjectsSummaryLayout = ({projects}) => {
   return (
      

          
Pr         


        
                      

              相关标签:
       
      

Answer 1

React has 2 commonly used component styles.

• Functional Component
• Class Component

So, When I was making use of Functional one then I was encountering this error.

Code snippet corresponding to Functional Component

But as soon as I changed it to Class Component then it worked.

Code snippet corresponding to Class Component.

Try changing Functional Component to Class Component. I hope it will resolve your problem.

Answer 2

In React, refs may not be attached to a stateless component.

React Redux 3 attaches a ref to the component you give it regardless of whether or not it's stateless. The warning you see comes from React because internally, React Redux 3 attaches a ref to the stateless component you supplied (ProjectsSummaryLayout).

You're not doing anything wrong and according to this GitHub comment, you can safely ignore the warning.

In React Redux 4, no ref is attached to the wrapped component by default, which means if you upgrade to React Redux 4, the warning should go away.