寻找一种更优雅的方式来使用相似的功能编写多个组件

Question

我有这个显示数据但也需要保存和操作状态的组件。我还有 5 个完全相同的其他组件，除了它们的功能内部有细微差别。我需要帮助找到一种更优雅的方式来编写此代码，而不是拥有 6 个或多或少相同的文件。

我已尝试理解并为此实例使用 HOC，但每个组件都有自己的提交调用，需要特定于该组件的数据。所以，我似乎找不到让 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" 这个词的各个方面。假设我有 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 访问它。前任。最后，当你有 Submit Button 时，它会像这样变化：

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

寻找一种更优雅的方式来使用相似的功能编写多个组件

Looking for a more elegant way to write multiple components using similar functions

javascript

function

reactjs

material-ui

higher-order-components