【React】04-关于React Props的实践

本文介绍: React 组件相互传参时，除了用**state，**还会经常看到一个**Props**对象，关于它的面纱及两者区别，将在文本进行实践及分析。

React 组件相互传参时，除了用state，还会经常看到一个Props对象，关于它的面纱及两者区别，将在文本进行实践及分析。

React 中的 props 是用于从父组件向子组件传递数据的一种机制。props 是一个包含了传递给组件的属性的对象。通过使用 props，可以使组件之间实现数据的传递和通信。

// 父组件
<ChildComponent name="John" age={25} />
  // 子组件
  const ChildComponent = (props) => {
    console.log(props.name); // 输出: John
    console.log(props.age);  // 输出: 25
    // ...
  };


// 在子组件中指定默认值
const ChildComponent = (props) => {
  const { name = 'Guest', age = 0 } = props;
  // ...
};

import PropTypes from 'prop-types';

const ChildComponent = (props) => {
  // ...
};

ChildComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

const ChildComponent = ({ name, age }) => {
  // 使用解构赋值从 props 中提取属性
  // ...
};

// 父组件
const ParentComponent = () => {
  const handleClick = () => {
    // 处理点击事件的逻辑
  };

  return <ChildComponent onClick={handleClick} />;
};

// 子组件
const ChildComponent = ({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
};