使用ES6让你的React代码提升到一个新档次
ES6使您的代码更具表现力和可读性。而且它与react完美配合!现在您已了解更多基础知识:现在是时候将你的ES6技能提升到一个新的水平!
嵌套props解构
您已经知道可以通过解构从React组件中的props中提取变量
const { user } = this.props;
但是如果user是一个对象并且你想从this.props.user.id提取到变量_id_呢?
您可以使用嵌套解构:
const { user: { id } } = this.props;
现在你有一个变量_id _是 this.props.user.id 的内容
传下所有props
您已经知道可以将props传递给子组件。
<MyChild shoe={this.props.shoe} cup={this.props.cup}/>
将所有props传递给具有扩展语法的子组件。
<MyChild {...this.props}/>
现在,MyChild可以访问shoe,cup以及父组件可以访问的所有其他props!
props解构
你已经知道你可以用箭头函数来构造props
const MyComponent = ({ shoe, car }) => /* do something */
但是,如果您还想访问props对象呢?
这可能是这样的:
const MyComponent = ({ shoe, car, ...props }) => /* do something */
props现在包含除shoe和car以外的所有props。
作为参数的函数
您已经知道可以将箭头函数作为参数传递给其他函数,例如map和forEach
myList.map((a) => toUpperCase(a))
(您必须自己编写toUpperCase以使此代码可运行)
上面的代码甚至没有使用箭头功能也可以写
myList.map(toUpperCase)
更干净!当您只在箭头函数中使用一个参数并将该参数传递给新函数时,您可以像这样编写它。
列表解构
您已经知道可以对列表进行解构:
const [a, b, c] = list;
获取第一项,其余为两个变量:
const [first, ...rest] = list;原文链接: blog.jakoblind.no 译文出处
本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!