当前位置：首页 > React

JS如何调用react组件

2026-01-24 07:16:32React

调用React组件的常见方法

在JavaScript中调用React组件通常涉及以下几种场景和方式：

直接渲染组件 通过ReactDOM.render()方法将组件渲染到DOM节点：

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

ReactDOM.render(<MyComponent />, document.getElementById('root'));

动态导入组件 使用动态导入实现按需加载：

JS如何调用react组件

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

通过ref调用组件方法 使用forwardRef和useImperativeHandle暴露组件方法：

const ChildComponent = React.forwardRef((props, ref) => {
  React.useImperativeHandle(ref, () => ({
    doSomething() {
      console.log('Method called');
    }
  }));
  return <div>Child</div>;
});

function Parent() {
  const childRef = React.useRef();
  return (
    <>
      <ChildComponent ref={childRef} />
      <button onClick={() => childRef.current.doSomething()}>
        Call Method
      </button>
    </>
  );
}

高阶组件(HOC)模式 通过高阶组件包装增强功能：

JS如何调用react组件

function withLogger(WrappedComponent) {
  return function(props) {
    console.log('Component rendered');
    return <WrappedComponent {...props} />;
  };
}

const EnhancedComponent = withLogger(MyComponent);

Context API调用 通过Context跨层级调用：

const MyContext = React.createContext();

function Parent() {
  return (
    <MyContext.Provider value={{ callMethod: () => alert('Called') }}>
      <Child />
    </MyContext.Provider>
  );
}

function Child() {
  const context = React.useContext(MyContext);
  return <button onClick={context.callMethod}>Trigger</button>;
}

自定义Hook封装 将组件逻辑提取为可复用的Hook：

function useCounter() {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount(c => c + 1);
  return { count, increment };
}

function Counter() {
  const { count, increment } = useCounter();
  return <button onClick={increment}>{count}</button>;
}