#23 React+Typescipt Props类型示例

在React和TypeScript中，使用props传递数据和函数是组件间交互的基础。以下是多种定义和使用props的方式，包括简单类型、可选属性、复杂对象、以及函数类型的props。每种方式都会有相应的组件使用示例。

1. 简单类型的Props

定义一个接受简单类型props的组件，例如string和number。

interface SimpleProps {
  title: string;
  count: number;
}

const SimpleComponent: React.FC<SimpleProps> = ({ title, count }) => {
  return (
    <div>
      <h2>{title}</h2>
      <p>Count: {count}</p>
    </div>
  );
};

// 使用组件
const App = () => (
  <SimpleComponent title="Simple Example" count={10} />
);

2. 可选属性

定义包含可选属性的props。

interface OptionalProps {
  title: string;
  description?: string; // 可选属性
}

const OptionalComponent: React.FC<OptionalProps> = ({ title, description }) => (
  <div>
    <h2>{title}</h2>
    {description && <p>{description}</p>}
  </div>
);

// 使用组件，可以省略description
const App = () => (
  <OptionalComponent title="Optional Props Example" />
);

3. 复杂对象类型的Props

定义包含复杂对象类型的props。

interface User {
  name: string;
  age: number;
}

interface UserProps {
  user: User;
}

const UserComponent: React.FC<UserProps> = ({ user }) => (
  <div>
    <h2>User Info</h2>
    <p>Name: {user.name}</p>
    <p>Age: {user.age}</p>
  </div>
);

// 使用组件
const App = () => (
  <UserComponent user={{ name: 'John Doe', age: 30 }} />
);

4. 函数类型的Props

定义接受函数类型props的组件，这在传递事件处理函数时特别有用。

interface ActionProps {
  onClick: () => void; // 函数类型的props
}

const ActionComponent: React.FC<ActionProps> = ({ onClick }) => (
  <button onClick={onClick}>Click Me</button>
);

// 使用组件
const App = () => {
  const handleClick = () => {
    console.log('Button clicked');
  };

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

5. 使用TypeScript的类型别名定义Props

使用类型别名来定义props，这对于简单的组件尤其方便。

type GreetingProps = {
  message: string;
};

const Greeting: React.FC<GreetingProps> = ({ message }) => <p>{message}</p>;

// 使用组件
const App = () => (
  <Greeting message="Hello with Type Alias" />
);

在上述示例中，我们展示了如何使用TypeScript与React来定义和使用多种类型的props，包括简单类型、可选类型、复杂对象以及函数类型的props。这些示例涵盖了大部分日常开发中的需求，帮助您更好地理解和运用React和TypeScript。

使用默认参数示例

在React和TypeScript中设置组件的默认props是一个常见的需求，它可以让你为组件的某些props提供默认值。这样，即使在使用组件时没有为这些props传递特定的值，组件也能以这些默认值正常工作。以下是几种设置默认参数的示例：

方法1: 在组件内部提供默认值

这种方法适用于函数组件，通过解构props并直接在参数中设置默认值。

interface GreetingProps {
  name?: string;
}

const Greeting: React.FC<GreetingProps> = ({ name = 'Guest' }) => (
  <p>Hello, {name}!</p>
);

// 使用组件时没有传递name
const App = () => <Greeting />;

方法2: 使用默认Props属性

对于类组件，您可以使用静态属性defaultProps来定义默认props值。

interface GreetingProps {
  name: string;
}

class Greeting extends React.Component<GreetingProps> {
  static defaultProps = {
    name: 'Guest',
  };

  render() {
    return <p>Hello, {this.props.name}!</p>;
  }
}

// 使用组件时没有传递name
const App = () => <Greeting />;

对于函数组件，虽然React Hooks（如useState，useEffect等）是推荐的方式，但您也可以在函数组件外部定义defaultProps。

const Greeting: React.FC<GreetingProps> = ({ name }) => (
  <p>Hello, {name}!</p>
);

Greeting.defaultProps = {
  name: 'Guest',
};

// 使用组件时没有传递name
const App = () => <Greeting />;

方法3: 结构赋值与默认值

在函数组件参数中使用结构赋值时，也可以为任意属性设置默认值，这是处理可选props的另一种方式。

interface WelcomeProps {
  message?: string;
}

const Welcome: React.FC<WelcomeProps> = ({ message = 'Welcome to the app!' }) => (
  <div>{message}</div>
);

// 使用组件时没有传递message
const App = () => <Welcome />;

以上示例展示了如何在React组件中使用TypeScript为props设置默认值。通过这些方法，您可以确保即使某些props没有被明确传递，组件仍然可以以预期的方式运行。