Reactjs为除一个组件之外的所有组件添加javascript代码

import React from 'react';

// 高阶组件，用于添加额外的JavaScript代码
const withExtraCode = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      // 在这里添加额外的JavaScript代码
      console.log('Extra code executed!');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

// 假设我们有一个目标组件，不需要添加额外的JavaScript代码
const TargetComponent = () => {
  return <div>Target Component</div>;
};

// 其他组件，需要添加额外的JavaScript代码
const OtherComponent1 = () => {
  return <div>Other Component 1</div>;
};

const OtherComponent2 = () => {
  return <div>Other Component 2</div>;
};

// 应用HOC到其他组件
const EnhancedOtherComponent1 = withExtraCode(OtherComponent1);
const EnhancedOtherComponent2 = withExtraCode(OtherComponent2);

// 在应用中使用这些组件
const App = () => {
  return (
    <div>
      <TargetComponent />
      <EnhancedOtherComponent1 />
      <EnhancedOtherComponent2 />
    </div>
  );
};

export default App;

import React, { createContext, useContext } from 'react';

// 创建Context
const ExtraCodeContext = createContext(false);

// 目标组件，不需要添加额外的JavaScript代码
const TargetComponent = () => {
  return <div>Target Component</div>;
};

// 其他组件，需要添加额外的JavaScript代码
const OtherComponent = () => {
  const shouldExecuteExtraCode = useContext(ExtraCodeContext);

  React.useEffect(() => {
    if (shouldExecuteExtraCode) {
      console.log('Extra code executed!');
    }
  }, [shouldExecuteExtraCode]);

  return <div>Other Component</div>;
};

// 在应用中使用这些组件
const App = () => {
  return (
    <ExtraCodeContext.Provider value={true}>
      <div>
        <TargetComponent />
        <OtherComponent />
      </div>
    </ExtraCodeContext.Provider>
  );
};

export default App;