React中如何用Flow仅校验自定义Props，兼容HTML按钮原生Props？

Great question! This is a super common scenario when building reusable React components with Flow, so let’s break this down clearly with practical examples.

1. Combine Custom Props with Native Button Props (No Manual Validation for Native Props) #

Flow has built-in type definitions for React HTML elements that make this trivial. You can use React.ButtonHTMLAttributes<HTMLButtonElement> which includes all native button props (like onClick, disabled, type, className, etc.) and combine it with your custom props using the spread operator in Flow types.

Here’s a complete example:

// @flow
import * as React from 'react';

// Define your custom props, then spread the native button attributes
type CustomButtonProps = {
  // Your custom prop with strict validation
  variant: 'primary' | 'secondary' | 'danger',
  // Include all native button props automatically
  ...React.ButtonHTMLAttributes<HTMLButtonElement>,
};

const CustomButton = ({ variant, children, ...rest }: CustomButtonProps) => {
  const baseClasses = 'px-4 py-2 rounded font-medium';
  const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    danger: 'bg-red-600 text-white hover:bg-red-700',
  }[variant];

  return (
    <button className={`${baseClasses} ${variantClasses}`} {...rest}>
      {children}
    </button>
  );
};

export default CustomButton;

This way:

• Flow will strictly validate your variant prop (only allowing the three specified values)
• All native button props are accepted without you having to list them individually
• Flow will still validate the native props against their correct types (e.g., onClick must be a function, disabled must be a boolean)

2. Validate Only Specific Props, Ignore All Others #

If you want to validate a small set of props and allow any other arbitrary props (without validation), you can use Flow’s object spread syntax with a catch-all type:

// @flow
import * as React from 'react';

type PartiallyValidatedProps = {
  // Props you want to validate strictly
  title: string,
  count?: number,
  // Catch-all for any other props (Flow won't validate these)
  ...{ [key: string]: mixed },
};

const StatsCard = ({ title, count = 0, ...rest }: PartiallyValidatedProps) => {
  return (
    <div className="border p-4" {...rest}>
      <h3 className="text-lg font-bold">{title}</h3>
      <p className="text-2xl">{count}</p>
    </div>
  );
};

The ...{ [key: string]: mixed } tells Flow to accept any additional props with any type (mixed is Flow’s way of saying "any value"). Note that this is permissive—if you want to restrict to only native HTML props (instead of arbitrary ones), use the element-specific attributes type like React.DivHTMLAttributes<HTMLDivElement> instead of the catch-all.

3. Do You Need External Packages or React Built-ins? #

You don’t need any extra npm packages for this—Flow’s built-in React type definitions handle all of this out of the box. Here’s how to choose the right approach:

• Restrict to native HTML props: Use React.[Element]HTMLAttributes<HTML[Element]Element> (e.g., React.InputHTMLAttributes<HTMLInputElement> for inputs, React.DivHTMLAttributes<HTMLDivElement> for divs). This is the safest approach for components that wrap native elements, as it prevents invalid props from being passed.
• Allow arbitrary props: Use the ...{ [key: string]: mixed } catch-all. This is useful for components that might need to accept custom props for third-party libraries or edge cases, but it’s less strict.

Just make sure you have Flow set up correctly with React type support—if you’re using a recent version of Flow, this should work automatically. If not, run flow-typed install react to install the official React type definitions for Flow.

内容的提问来源于stack exchange，提问作者riscos3