В поисках более элегантного способа написания нескольких компонентов с использованием похожих функций

Question

У меня есть этот компонент, который отображает данные, но также должен сохранять и манипулировать состоянием. У меня есть 5 других компонентов, которые точно такие же, за исключением мелких нюансов внутри их функций. Мне нужна помощь в поиске более элегантного способа написания этого кода, вместо того, чтобы иметь 6 файлов, которые более или менее совпадают.

Я пытался понять и использовать HOC для этого экземпляра, но у каждого компонента есть свой собственный вызов submit, который требует данных, специфичных для этого компонента. Так что я не могу найти способ заставить HOC работать.

Это мои функции:

  componentDidMount () {
    setTimeout(() => {
      this.setState({ baseForm: this.props.baseData })
      this.getDisable()
      this.setState({ loading: false })
    }, 2000)
  }

  handleSwitch = item => event => {
    this.setState({ [item]: event.target.checked })
  }

  handlePRESubmit () {
    const array = this.state.baseForm
    array.forEach(item => {
      item.isTemplate = false
      item.mark = this.state.mark
      item.isVisible = this.state.visible
      item.genesisId = item._id
    })
  }

  handleSubmit = () => {
    this.handlePRESubmit()
    let formData = this.state.baseForm[0]
    fetch(APIURL, {
      method: 'POST',
      body: JSON.stringify(formData),
    }).then(response => {
      response.json().then(data => {
        let orgId = localStorage.getItem('orgId')
        let sku = { skuId: data.data._id, type: 'verification' }
        fetch(APIURL, {})
          .then(response => response.json())
          .then(data => {})
      })
    })
  }

  toggleDisabled () {
    if (this.state.assigned !== undefined) {
      this.setState({ disabled: !this.state.disabled })
    }
  }

  getDisable () {
    setTimeout(() => {
      const result = this.props.assignedSku.find(e => e.name === 'Base')
      this.setState({ assigned: result })
      if (this.state.assigned !== undefined) {
        this.setState({ mark: true })
        this.setState({ visible: true })
      }
    }, 1000)
  }

  handleMenu = event => {
    this.setState({ anchorEl: event.currentTarget })
  }

  handleClose = () => {
    this.setState({ anchorEl: null })
  }

А это моя карта

        <Card id='partner-sku-card'>
          <CardHeader
            title={base.name}
            subheader={'$' + ' ' + base.price}
            action={
              <div>
                <IconButton onClick={this.handleMenu}/>
              </div>
            }
          />
          <Menu
            anchorEl={anchorEl}
            open={Boolean(anchorEl)}
            onClose={this.handleClose}
          >
            <MenuItem disabled={this.state.disabled ? 'disabled' : ''}>
              Edit
            </MenuItem>
          </Menu>
          <CardActions>
            <FormControlLabel
              control={
                <Switch
                  checked={this.state.mark}
                  onChange={this.handleSwitch('mark')}
                  value='mark'
                />
              }
            />
            <FormControlLabel
              control={
                <Switch
                  checked={this.state.visible}
                  onChange={this.handleSwitch('visible')}
                  value='visible'
                />
              }
            />
            <Button onClick={this.handleSubmit}>
              Submit
            </Button>
          </CardActions>
        </Card>

Опять же, весь этот код снова записывается в 5 других файлах. Мне нужен элегантный способ заменить слово «база» / «база» в каждом аспекте этого. Допустим, у меня есть Base, Mid, Top. Мне нужно, чтобы все эти функции работали для всех 3, и в конце все равно производили бы одну и ту же карту. Спасибо за помощь!

Answer 1

Создайте компонент с именем CardWrapper или что-то в этом роде. Затем в каждом другом файле вызовите CardWrapper так:

class First extends Component {
    handleSwitch = () => {
        //its own implementation
    }

    handlePreSubmit = () => {
        //its own implementation
    }

    handleSubmit = () => {
        //its own implementation
    }
    //other methods that you need for each component to be different

    render(){
        return (
            <CardWrapper handlePreSubmit={this.handlePreSubmit} handleSubmit={this.handleSubmit} handleSwitch={this.handleSwitch} />
        )
    }
}

Помните, что вы должны добавить все это ко всем файлам, которые совместно используют компонент CardWrapper.

А затем в CardWrapper вы можете получить к нему доступ this.props. Ex. в конце концов, когда у вас есть Submit Button, это изменится как:

<Button onClick={this.props.handleSubmit}>
    Submit
</Button>