Javascript 是否可以将新属性、功能和html从其他文件导入现有组件？

我有免费和专业的组件包

我需要为现有的免费组件添加新功能（pro）

例如，我有一个自由组件

import React from "react";

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clickCounter: 0
    }
  }

  addClick = () => {
    this.setState({
      clickCounter: this.state.clickCounter+1
    })
  }

  render() {
    return (
    <button onClick={this.addClick}>Click {this.state.clickCounter}</button>
    );
  }
}

export default Example;

从“React”导入React；
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
单击计数器：0
}
}
addClick=（）=>{
这是我的国家({
clickCounter:this.state.clickCounter+1
})
}
render（）{
返回(
单击{this.state.clickCounter}
);
}
}
导出默认示例；

在文件夹

component/pro/

中，我想要新功能。（正在为免费软件包生成删除此文件夹）

我希望同一个组件在同一个名称下有更多的可能性，仅用于专业版

例如，单击次数的限制

最好的方法是什么

---

我应该从组件中删除多余的代码，还是可以以某种方式将附加功能加载到现有组件中。

如果我正确理解了这个问题，那么您就是在区分免费用户和专业用户，并基于此您希望提供各自的功能

您的用户详细信息API应该告诉您用户状态（免费或专业）。基于该响应，您可以实现如下所示

import FreeExample from './FreeExample';
import ProExample from './ProExample';
import AppLoader from './AppLoader';


class App extends React.Component {
  isProUser = ({ userData }) => userData.status === 'PRO';

  render() {
     const { userData, isLoading } = this.props;
     if(isLoading) return <AppLoader />
     return (
       { isProUser({ userData })  ? <ProExample /> : <FreeExample />}
     );
 }
}

从“/freexample”导入freexample；
从“/ProExample”导入ProExample；
从“./AppLoader”导入AppLoader；
类应用程序扩展了React.Component{
isProUser=（{userData}）=>userData.status=='PRO'；
render（）{
const{userData，isLoading}=this.props；
如果（卸载）返回
返回(
{isProUser（{userData}）？：}
);
}
}

发生了什么事？如果它不是开源项目，为什么不能将其添加到构建中？代码无论如何都是可见的，您可以限制其使用。我有两个包文件来导入组件。在package.json依赖项中

“package”：“/package.zip”

或

“package”：“/packagePro.zip”

。然后我可以从“myPackage”导入我的组件

import{Button}，package-pro.zip有一个包含pro组件的文件夹。正在删除免费软件包版本的文件夹
pro
。我想知道是否有可能从pro文件夹中为免费组件导入其他功能。然后我从我的软件包中删除文件夹
pro
，然后构建（免费）所有内容都应该正常工作，没有
pro
folder中的功能、道具等。这可能是构建工作的一部分，在构建时，您的专业软件包将被删除。查看构建代码会很有帮助。如果可能，请共享网页包生成代码。编译通过运行脚本删除pro文件夹（以及导入pro组件的其他文件和代码）完成。我唯一能说的是，我可以使用正则表达式来检查文件并删除多余的代码，但我认为这可能是一种更简单的方法。我脑海中浮现的几个是。1）更新删除脚本，使其不删除整个Pro文件夹，只删除子文件夹，子文件夹可以作为参数传递。2） 创建一个单独的包，称之为commonFreeAndPro。并在构建作业中忽略这一点。