如何修復 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>
    );
    };

我會推薦使用第二個選項。