如何解构箭头表示法中的参数
如何解构箭头表示法中的参数
提问于 2018-07-23 23:58:32
假设我在React中有一个函数
function Header = ({ props }) => <div className={props.classes.container}/>我当前的eslint配置正确地阻止了我使用此代码，因为props对象必须被解构。
我可以通过使用
const Header = function Header(props) {
const { classes } = props
return <div className={classes.container}/>
}这解决了我的问题，但我更喜欢用箭头表示法。有没有可能用箭头符号实现类似于我的第二个示例的结果？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-24 03:40:37
函数组件(函数或箭头函数)获得props作为其第一个参数，因此您可以直接解构类：
const Header = ({ classes }) => <div className={classes.container}/>对于标准的JS函数也是如此：
function Header({ classes }) {
return <div className={classes.container}/>
}Stack Overflow用户
发布于 2018-07-24 00:02:54
您可以这样做，但排队的时间会更长。你的linter可能希望你拆分这行，它太长了：
const Header = ({ props: { classes: { container } } }) => <div className={container}/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51482937
复制相关文章
相似问题