ES6 中的解构语法实现 props 默认值

ES6 中的解构语法实现 props 默认值

在 React 或 Vue 中，常常需要传递父组件的数据给子组件，这时候就需要用到 props。但是有些情况下，父组件并不一定传递所有的 props 给子组件，这时候就需要在子组件中实现默认值。

在 ES6 中，我们可以使用解构语法来实现 props 的默认值。

例如，我们有一个组件 MyComponent，需要从父组件传递一个名字和一个年龄：

import React from 'react';

function MyComponent(props) {
  const name = props.name;
  const age = props.age;

  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
    </div>
  );
}

export default MyComponent;

如果父组件不传递 name 或 age 给 MyComponent，那么我们可以在 MyComponent 中添加默认值：

import React from 'react';

function MyComponent(props) {
  const { name = 'Tom', age = 20 } = props;

  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
    </div>
  )
}

export default MyComponent;

这里我们用 { name = 'Tom', age = 20 } 对 props 进行了解构，如果 name 或 age 没有在 props 中传递，那么它们就会使用默认值。

不仅在 React 中可以使用解构语法来实现 props 的默认值，在 Vue 中同样适用：

<template>
  <div>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    name: {
      type: String,
      default: 'Tom'
    },
    age: {
      type: Number,
      default: 20
    }
  }
}
</script>

在 Vue 中，我们可以直接在 props 中设置默认值，省去了在组件中进行解构的步骤。

总结

本文介绍了在 ES6 中使用解构语法来实现 props 的默认值。对于初学者来说，掌握这种语法可以更加方便地使用 React 或 Vue 的开发。此外，在其他场景中，解构语法也是一种非常实用的语法，深入学习 ES6 可以帮助我们更好地开发现代化的 Web 应用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b4a79badd4f0e0ffd89d5a