重复使用具有不同内容的相同功能

Question

我有两个具有相同组件的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

这是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>
    );
  }
}

你的模块可以是这个，

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

Demo

重复使用具有不同内容的相同功能

Reusing the same function with different content

javascript

reactjs

react-component

react-functional-component