当前位置：首页 > React

react实现指令

2026-01-26 17:03:35React

React 实现指令式操作

在 React 中实现指令式操作通常涉及直接操作 DOM 或调用组件方法。React 推崇声明式编程，但在某些场景（如聚焦输入框、触发动画等）需要指令式操作。

使用 useRef 钩子获取 DOM 引用

import React, { useRef } from 'react';

function TextInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

通过 forwardRef 暴露组件方法

const ChildComponent = React.forwardRef((props, ref) => {
  const doSomething = () => {
    console.log('Method called');
  };

  React.useImperativeHandle(ref, () => ({
    doSomething
  }));

  return <div>Child Component</div>;
});

function ParentComponent() {
  const childRef = useRef(null);

  const handleClick = () => {
    childRef.current.doSomething();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Call Child Method</button>
    </div>
  );
}

第三方库实现指令模式 例如使用 react-command-palette 等库创建命令式交互：

import CommandPalette from 'react-command-palette';

const commands = [
  {
    name: 'Home',
    command() {
      window.location.href = '/';
    }
  },
  {
    name: 'Contact',
    command() {
      alert('Contact us at support@example.com');
    }
  }
];

function App() {
  return <CommandPalette commands={commands} />;
}

自定义指令系统实现

创建指令注册中心

const CommandRegistry = {
  commands: new Map(),

  register(name, callback) {
    this.commands.set(name, callback);
  },

  execute(name, ...args) {
    if (this.commands.has(name)) {
      this.commands.get(name)(...args);
    }
  }
};

// 注册指令
CommandRegistry.register('alert', (message) => {
  alert(message);
});

// 使用指令
function AlertButton() {
  return (
    <button onClick={() => CommandRegistry.execute('alert', 'Hello!')}>
      Show Alert
    </button>
  );
}

结合 Context API 实现全局指令

const CommandContext = React.createContext();

function CommandProvider({ children }) {
  const [commands] = useState({});

  const register = (name, handler) => {
    commands[name] = handler;
  };

  const execute = (name, ...args) => {
    if (commands[name]) {
      commands[name](...args);
    }
  };

  return (
    <CommandContext.Provider value={{ register, execute }}>
      {children}
    </CommandContext.Provider>
  );
}

function useCommand() {
  return useContext(CommandContext);
}

// 组件中使用
function TestComponent() {
  const { execute } = useCommand();

  return (
    <button onClick={() => execute('log', 'Test message')}>
      Trigger Command
    </button>
  );
}