如何修复 eslint: react/destructuring-assignment 错误？

Question

 const Container = (props) => { return ( <StyledDiv> <SmallScreenDiv>{props.children}</SmallScreenDiv> </StyledDiv> ); };

This is my code and error happens at {props.children}
how can I fix this eslint error?

Answer 1

You can also destruct your props like this:

const Container = ({children}) => {
    return (
        <StyledDiv>
            <SmallScreenDiv>{children}</SmallScreenDiv>
        </StyledDiv>
    );
};

Answer 2

There are two solution for this

1. Disable the prefer-destructuring feature on the eslint

2. destructure your props

    const Container = ({children}) => { return ( <StyledDiv> <SmallScreenDiv>{children}</SmallScreenDiv> </StyledDiv> ); };

or

   const Container = (props) => {
    const {children} = props
    return (
        <StyledDiv>
            <SmallScreenDiv>{children}</SmallScreenDiv>
        </StyledDiv>
    );
    };

I will recommend to use second option.