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

Question

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

这是我的代码，错误发生在 {props.children}
我该如何解决这个 eslint 错误？

Answer 1

你也可以像这样破坏你的道具：

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

Answer 2

有两种解决方案

1. 禁用 eslint 上的首选解构功能

2. 解构你的道具

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

或者

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

我会推荐使用第二个选项。