React props的使用小结

import React from 'react';
 
// 定义函数组件，接收 props 参数
const MyComponent = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
};
 
export default MyComponent;

import React from 'react';
 
// 使用解构语法接收 props
const MyComponent = ({ title, description }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
};
 
export default MyComponent;

import React from 'react';
 
// 使用解构时设置默认值
const MyComponent = ({ title = 'Default Title', description = 'Default Description' }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
};
 
export default MyComponent;

import React from 'react';
import PropTypes from 'prop-types';
 
const MyComponent = ({ title, description }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
};
 
// 使用 PropTypes 进行类型检查
MyComponent.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string,
};
 
export default MyComponent;

import React from 'react';
 
// 定义 props 类型
interface MyComponentProps {
  title: string;
  description?: string;
}
 
const MyComponent: React.FC<MyComponentProps> = ({ title, description }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description ?? 'Default Description'}</p>
    </div>
  );
};
 
export default MyComponent;

import React from 'react';
import MyComponent from './MyComponent';
 
const ParentComponent = () => {
  return (
    <div>
      <MyComponent title="Hello, World!" description="This is a description." />
    </div>
  );
};
 
export default ParentComponent;