如何在React组件中根据传入的小写事件名绑定对应驼峰式JSX事件处理器？

Great question! The key here is converting those lowercase event names (like dragend) into React's required camelCase event props (like onDragEnd) without manually maintaining a cumbersome mapping table. Here are two reliable approaches:

1. Dynamic Event Map (Recommended) #

This method leverages the browser's DOM API to automatically generate a mapping between lowercase native event names and React's camelCase event props. No manual maintenance needed—it will capture all supported events automatically.

import { useMemo } from 'react';

const EventBoundComponent = ({ eventName, handler, children }) => {
  // Generate the event map once on component mount
  const eventMap = useMemo(() => {
    const tempElement = document.createElement('div');
    const map = {};

    // Iterate over all properties of a DOM element
    for (const prop in tempElement) {
      if (prop.startsWith('on')) {
        // Convert React's camelCase prop back to lowercase native event name
        const nativeEventName = prop
          .slice(2) // Remove the "on" prefix
          .replace(/([A-Z])/g, match => `-${match.toLowerCase()}`) // Convert camelCase to kebab-case
          .toLowerCase();

        map[nativeEventName] = prop;
      }
    }

    return map;
  }, []);

  // Get the corresponding React event prop
  const reactEventProp = eventMap[eventName];

  // Handle invalid event names gracefully
  if (!reactEventProp) {
    console.warn(`Warning: Unsupported event name "${eventName}"`);
    return <div>{children}</div>;
  }

  const eventProps = { [reactEventProp]: handler };
  return <div {...eventProps}>{children}</div>;
};

How it works: #

• We create a temporary DOM element and iterate over all its properties starting with on (these are the standard DOM event handler attributes).
• For each on* property, we convert it back to the lowercase native event name (e.g., onDragEnd → dragend) and store this pair in a map.
• When the component receives an eventName, we look it up in the map to get the correct React prop name.

This works for all standard DOM events, including edge cases you might not think to add to a manual map. For server-side rendering (SSR), you can use a library like jsdom to simulate the DOM environment and generate the map once during setup.

2. Manual String Transformation (For DOM-less Environments) #

If you can't access the DOM (e.g., limited SSR environments), you can use a regex-based approach to handle common event names. While it requires maintaining a small list of multi-word event patterns, it's lighter than a full mapping table:

const EventBoundComponent = ({ eventName, handler, children }) => {
  const toReactEventProp = (name) => {
    // Capitalize the first letter of each semantic word in the event name
    const capitalizedName = name.replace(
      /(drag|mouse|key|touch|pointer)([a-z])|(end|start|over|down|up|enter|leave|press|in|out)/g,
      (match, prefix, char, suffix) => {
        if (prefix && char) {
          return prefix + char.toUpperCase();
        }
        return suffix.charAt(0).toUpperCase() + suffix.slice(1);
      }
    );

    // Add the "on" prefix and capitalize the first letter
    return `on${capitalizedName.charAt(0).toUpperCase()}${capitalizedName.slice(1)}`;
  };

  const reactEventProp = toReactEventProp(eventName);
  const eventProps = { [reactEventProp]: handler };

  return <div {...eventProps}>{children}</div>;
};

Note: #

This approach covers most common events but might miss some niche ones. You can extend the regex pattern as needed to support additional event names.

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