Javascript 使用不同的内容重用相同的函数

我有两个js文件，它们具有相同的组件，调用相同的函数，但内容不同。因此，基本上，当打开模块A按钮被点击时，FileA就会打开。按钮B也是一样。我怎样才能重写这两个组件，或者至少重写我的函数，使这两个组件在调用同一个函数时不会受到影响

这是FileA.js

import React from 'react'

const moduletext = 'TEXT1'
const ModuleText= ({ text }) => {
    return (
        <div className="this_container">
            <span>{text}</span>
            <span role="button" onClick={props.close}>Close</span>
        </div>
    )
}

function ModuleA(props) {
    return (
        <div className="_this_container" style={props.show}>
            <ModuleText text={moduletext} />
        </div>
    )
}

export default ModuleA

从“React”导入React
常量moduletext='TEXT1'
常量ModuleText=（{text}）=>{
返回(
{text}
接近
)
}
功能模块A（道具）{
返回(
)
}
导出默认模块a

这是FileB.js

import React from 'react'

const moduletext = 'TEXT2'
const ModuleText= ({ text }) => {
    return (
        <div className="this_container">
            <span>{text}</span>
            <span role="button" onClick={props.close}>Close</span>
        </div>
    )
}

function ModuleB(props) {
    return (
        <div className="_this_container" style={props.show}>
            <ModuleText text={moduletext} />
        </div>
    )
}

export default ModuleB

从“React”导入React
常量moduletext='TEXT2'
常量ModuleText=（{text}）=>{
返回(
{text}
接近
)
}
功能模块B（道具）{
返回(
)
}
导出默认模块B

然后我的主要部分是：

import ModuleA from './FileA'
import ModuleB from './FileB'

class MainComponent extends Component {
    constructor() {
        super()

        this.state = {
            show: { display: 'none' }
        }

        this.open = this.open.bind(this);
        this.close = this.close.bind(this);
    }

    open(){
        this.setState({show: {display: 'block'}})
    }

    close(){
        this.setState({show: {display: 'none'}})
    }

    render(){
        return(
            <div>
                <span role="button" onClick={this.open}>Open Module A</span>
                <span role="button" onClick={this.open}>Open Module B</span>
                <ModuleA show={this.state.show} close={this.close}/>
                <ModuleB show={this.state.show} close={this.close}/>
            </div>
        )
    }
}

从“/FileA”导入模块a
从“./FileB”导入模块B
类MainComponent扩展组件{
构造函数（）{
超级（）
此.state={
显示：{显示：“无”}
}
this.open=this.open.bind（this）；
this.close=this.close.bind（this）；
}
开（）{
this.setState（{show:{display:'block'}}）
}
关闭（）{
this.setState（{show:{display:'none'}}）
}
render（）{
返回(
开放模块A
开放式模块B
)
}
}

我想你不需要

fileA.js

和

fileB.js

。相反，您可以为多个模块设置多个单独的状态

class App extends Component {
  constructor() {
    super();
    this.state = {
      showA: { display: 'none' },
      showB: { display: 'none' }
    }

    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
  }

  open(type){
   //Open the module based on passed variable
    if(type === 'A'){
      this.setState({showA: {display: 'block'}})
    }else{
      this.setState({showB: {display: 'block'}})
    }
  }

  close(type){
    //Close the variable based on passed variable
    if(type === 'A'){
      this.setState({showA: {display: 'none'}})
    }else{
      this.setState({showB: {display: 'none'}})
    }
  }

  render() {
    return (
      <div>
        <span role="button" onClick={() => this.open('A')}>Open Module A</span>  //Pass a variable here to open specific module
        <span role="button" onClick={() => this.open('B')}>Open Module B</span> //Pass a variable here to open specific module
        <Module show={this.state.showA} close={this.close} module="A" text="TEXT1"/>  //You need to pass multiple props here as required by your module
        <Module show={this.state.showB} close={this.close} module="B" text="TEXT2"/>  //You need to pass multiple props here as required by your module
      </div>
    );
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
showA:{display:'none'}，
showB:{display:'none'}
}
this.open=this.open.bind（this）；
this.close=this.close.bind（this）；
}
开放式（类型）{
//根据传递的变量打开模块
如果（类型=='A'）{
this.setState（{showA:{display:'block'}）
}否则{
this.setState（{showB:{display:'block'}）
}
}
关闭（类型）{
//根据传递的变量关闭变量
如果（类型=='A'）{
this.setState（{showA:{display:'none'}）
}否则{
this.setState（{showB:{display:'none'}）
}
}
render（）{
返回(
this.open（'A'）}>打开模块A//在此处传递变量以打开特定模块
this.open（'B'）}>openmoduleb//在此处传递一个变量以打开特定的模块
//您需要根据模块的要求在此处传递多个道具
//您需要根据模块的要求在此处传递多个道具
);
}
}

你可以这样做

const ModuleText= ({ text, close, module }) => {
    return (
        <div className="this_container">
            <span>{text}</span>
            <span role="button" onClick={() => close(module)}>Close</span> //Pass the variable to close the specific module
        </div>
    )
}

function Module(props) {
    return (
        <div className="_this_container" style={props.show}>
            <ModuleText text={props.text} close={props.close} module={props.module}/> //Pass down the props to your ModuleText component
        </div>
    )
}

constmoduletext=（{text，close，module}）=>{
返回(
{text}
close（module）}>close//传递变量以关闭特定模块
)
}
功能模块（道具）{
返回(
//将道具传递给您的ModuleText组件
)
}

---

嗨，戴夫，请检查我的解决方案，如果有帮助，请告诉我。是的。明亮的非常感谢。