由于Angular没有props概念，因此需要学习props

3 年 ago

新, 韵

2 minutes

我正在使用ChatGPT学习。
首先，我经常在Angular上开发。

在Angular中，是否有props属性？

在Angular中，存在着与React的props直接对应的概念，即「输入（Inputs）」和「输出（Outputs）」。

在React中，使用props将数据从父组件传递给子组件。同样地，在Angular中，可以使用@Input()装饰器将数据从父组件传递给子组件。

根据输入和输出的实际示例来使用方法。

当然，我们会详细说明使用Angular的@Input()和@Output()装饰器在父子组件之间进行数据传递和事件传播的方法。

使用@Input()将数据传递给子组件。

让我们看一下ParentComponent将数据传递给ChildComponent的示例。

父组件

@Component({
  selector: 'app-parent',
  template: `
    <app-child [childMessage]="parentMessage"></app-child>
  `
})
export class ParentComponent {
  parentMessage = 'Hello from Parent Component!';
}

ChildComponent: 子组件

@Component({
  selector: 'app-child',
  template: `
    <div>{{ childMessage }}</div>
  `
})
export class ChildComponent {
  @Input() childMessage: string;
}

在这个例子中，ParentComponent通过名为childMessage的@Input()将数据传递给ChildComponent。

使用@Output()将事件从子组件传播到父组件。

让我们看一个将子组件的按钮点击事件传递给父组件的例子。

子组件

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendEvent()">Click me!</button>
  `
})
export class ChildComponent {
  @Output() childEvent = new EventEmitter<string>();

  sendEvent() {
    this.childEvent.emit('Event from Child Component');
  }
}

家长组件

@Component({
  selector: 'app-parent',
  template: `
    <app-child (childEvent)="handleChildEvent($event)"></app-child>
  `
})
export class ParentComponent {
  handleChildEvent(event: string) {
    console.log(event);  // Will log: "Event from Child Component"
  }
}

在这个例子中，ChildComponent触发了名为childEvent的@Output()事件，然后ParentComponent接收到了这个事件。

通过使用Angular的@Input()和@Output()装饰器，可以轻松实现父子组件间的数据传递和事件传播。

React的props是指属性或属性对象。

React的props指的是作为React组件输入的数据。props在将数据从父组件传递给子组件时使用，以提高组件的可重用性。props是只读的，不允许在子组件内部修改其值。

以下是一个展示React props基本使用方法的例子。

Family component:

function ParentComponent() {
  return <ChildComponent message="Hello from Parent!" />;
}

子组件：

function ChildComponent(props) {
  return <div>{props.message}</div>;
}

在这个例子中，从ParentComponent传递了一个名为message的props到ChildComponent。在子组件内部，使用这个props来显示消息。

props的特点：

从父组件到子组件：props始终用于从父组件向子组件传递数据。

可以传递任意类型的数据：可以将字符串、数字、数组、对象、函数、React元素等几乎所有类型的数据作为props传递。

类型检查：通过使用propTypes，可以指定props的类型，并在开发过程中收到与类型不匹配相关的警告。

总体而言，props是React组件之间数据传递的重要概念，可以方便地提高组件的可重用性和可预测性。

道具的实现示例

当然，我将根据上述的实现示例，详细解释React的props的用法和实现要点。

1. props的基本使用方式

如果要将数据从父组件传递给子组件，在父组件的JSX内部，将数据作为属性进行设置。

父组件

function ParentComponent() {
  return <ChildComponent message="Hello from Parent!" />;
}

在子组件中，通过props对象接收此数据。

子组件：

function ChildComponent(props) {
  return <div>{props.message}</div>;
}

2. 传递多个道具

可以将一个或多个props传递给子组件。

function ParentComponent() {
  return <ChildComponent message="Hello" author="Parent" />;
}

function ChildComponent(props) {
  return <div>{props.message} from {props.author}!</div>;
}

3. 不要在子组件内修改props的值

props是只读的，无法在子组件内直接修改。如果尝试进行修改，React会抛出错误。

4. 设置默认的props

您可以使用defaultProps为props设置默认值。

function ChildComponent(props) {
  return <div>{props.message}</div>;
}

ChildComponent.defaultProps = {
  message: "Default Message"
};

5. 对 props 进行类型检查

使用`propTypes`来为props指定类型，并且能够收到有关类型不匹配的警告。您需要使用`prop-types`库。

import PropTypes from 'prop-types';

function ChildComponent(props) {
  return <div>{props.message}</div>;
}

ChildComponent.propTypes = {
  message: PropTypes.string.isRequired
};

在这个例子中，期望message是一个字符串，并且它是必需的props。

6. 数据传递从子代到父代

子组件可以通过将函数作为 props 接收，并通过执行该函数向父组件传递数据或事件。

function ParentComponent() {
  function handleChildClick(data) {
    console.log(data);
  }
  
  return <ChildComponent onClick={handleChildClick} />;
}

function ChildComponent(props) {
  return <button onClick={() => props.onClick("Data from Child")}>Click me</button>;
}

通过这种方法，可以实现从子组件到父组件的通信。

通过理解这些基本要点，可以有效地使用React的props，在组件之间进行数据传递。