我已经做了大量的在线阅读,只是无法破坏我的头脑。
//before destructuring
function me(details){
console.log('My name is ' + details.name + ' and I work for ' + details.company);
}
//after destructuring
function me({ name, company }){
console.log('my name is ' + name + ' and i work for ' + company);
}
me({
name: 'Rich',
age: 34,
city: 'London',
company: 'Google'
})
我已经写了这个,这很有意义,但是我没有得到的一件事是反应。
如果您这样做:
export default ({ name }) => <h1>Hello {name}!</h1>;
<Hello name="CodeSandbox" />
为什么我不能这样做:
export default ( name ) => <h1>Hello {name}!</h1>;
删除{}
功能参数中的?
如果有人看到我做错了什么,请他们能解释一下吗?
我习惯于这样的功能:
functionA (a) => { // do something with the parameter a }
不确定{}
参数内的卷发
export default (name) => <h1>Hello {name}!</h1>;
将不起作用,因为对于任何组件,只有一个参数是 props
因此,以最长的形式,您可以编写
export default (props) => {
return <h1>Hello {props.name}!</h1>;
}
可以缩短(使用解构)为:
export default (props) => {
const {name} = props; // Extract name from props using destructuring
return <h1>Hello {name}!</h1>;
}
可以将其缩短为(在参数级别使用解构):
export default ({name}) => { // Extract name directly here
return <h1>Hello {name}!</h1>;
}
可以缩短为(删除功能主体花括号),方法是:
export default ({name}) => <h1>Hello {name}!</h1>;
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句