Повторное использование одной и той же функции с другим содержанием

Question

У меня есть два js-файла с одинаковыми компонентами, вызывающие одну и ту же функцию, но с разным содержимым. Таким образом, в основном, функция идет по нажатию кнопки «Открыть модуль». 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

Это 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

Тогда мой основной компонент:

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>
        )
    }
}

Answer 1

Я думаю, вам не нужны 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>
    );
  }
}

Youe модуль может быть таким,

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>
    )
}

Демо