使用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以使此代码可运行）

请到「今天看啥」查看全文