Javascript 正在寻找使用类似函数编写多个组件的更优雅的方法

我有一个显示数据的组件，但也需要保存和操作状态。我还有5个完全相同的组件，除了功能上的细微差别。我需要帮助找到一种更优雅的方式来编写这段代码，而不是有6个大致相同的文件

我试图理解并使用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/Base的各个方面。假设我有底部、中部和顶部。我将需要所有这些功能来为所有3个工作，并在最后仍然产生相同的卡。 谢谢你的帮助

创建一个名为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作为可视卡的模板？@PhilipKappaz是的。您可以在CardWrapper中共享任意多的内容，但是对于每个组件，这些方法需要不同，然后这些方法应该在它们自己的组件上。更改状态如何？例如，in-CardWrapper调用{this.state.disabled？'diabled'：}这会简单地更改为this.props.disabled吗？@PhilipKappaz不，您不需要通过props传递它，因为您已经在CardWrapper中，您只需按this.state.disabled的方式访问它。

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