如何在反应组件中使用解构

时间:2017-11-30 08:08:19

标签: javascript reactjs ecmascript-6 destructuring

我已经在网上做了大量的阅读,并且无法在我的脑海中进行解构,很好。

//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 }

不确定参数

中的花环{}

1 个答案:

答案 0 :(得分:5)

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>;