如何用箭头符号解构参数

Question

假设我在React中有一个函数

function Header = ({ props }) => <div className={props.classes.container}/>

我当前的eslint配置正确地阻止了我使用此代码，因为必须分解props对象

我可以通过使用

来达到预期的效果

const Header = function Header(props) {
 const { classes } = props
 return <div className={classes.container}/>
}

这解决了我的问题，但我希望所有内容都用箭头表示。可以用箭头符号实现与第二个示例类似的结果吗？

Answer 1

您可以这样做，但是行会更长。您的短毛绒可能希望您将线分得太长：

const Header = ({ props: { classes: { container } } }) => <div className={container}/>

Answer 2

功能组件（函数或箭头函数）作为第一个参数获取道具，因此您可以直接解构类：

const Header = ({ classes }) => <div className={classes.container}/>

使用标准的JS函数也是一样：

function Header({ classes }) {
    return <div className={classes.container}/>
}