如何修复 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

有两种解决方法

在 eslint 上禁用首选解构功能

破坏你的道具

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

或

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

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

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

How can I fix eslint: react/destructuring-assignment error?

javascript

reactjs

eslint