使用数组映射函数将JSX格式化为渲染

Question

let typeOpt = [];
let specialityOpt = [];
let planOpt = [];
let acceptOpt = [];
let officeOpt = [];
let doctorOpt = [];

<div>
    {typeOpt.map((typeOp,index) => (
       <FormGroup row>

        <FormControlLabel
          control={
            <Checkbox
              checked={this.state.checkedItem}
              onChange={this.handleChange('checkedItem')}
              value="checkedB"
              color="primary"
            />
          }
          label={typeOp.label}
        />

      </FormGroup>
    ))}
</div>
<div>
    {specialityOpt.map((specialityOp,index) => (
       <FormGroup row>

        <FormControlLabel
          control={
            <Checkbox
              checked={this.state.checkedItem}
              onChange={this.handleChange('checkedItem')}
              value="checkedB"
              color="primary"
            />
          }
          label={specialityOp.label}
        />

      </FormGroup>
    ))}
</div>
<div>
{planOpt.map((planOp,index) => {
    <FormGroup row>

        <FormControlLabel
          control={
            <Checkbox
              checked={this.state.checkedItem}
              onChange={this.handleChange('checkedItem')}
              value="checkedB"
              color="primary"
            />
          }
          label={planOp.label}
        />

      </FormGroup>

  })}
  {acceptOpt.map((acceptOp,index) => {
    <FormGroup row>

        <FormControlLabel
          control={
            <Checkbox
              checked={this.state.checkedItem}
              onChange={this.handleChange('checkedItem')}
              value="checkedB"
              color="primary"
            />
          }
          label={acceptOp.label}
        />

      </FormGroup>


  })}
   {officeOpt.map((officeOp,index) => {
    <FormGroup row>

        <FormControlLabel
          control={
            <Checkbox
              checked={this.state.checkedItem}
              onChange={this.handleChange('checkedItem')}
              value="checkedB"
              color="primary"
            />
          }
          label={officeOp.label}
        />

      </FormGroup>

  })}

</div>
<div>
{doctorOpt.map((doctorOp,index) => (
   <FormGroup row>

        <FormControlLabel
          control={
            <Checkbox
              checked={this.state.checkedItem}
              onChange={this.handleChange('checkedItem')}
              value="checkedB"
              color="primary"
            />
          }
          label={doctorOp.label}
        />

      </FormGroup>

  ))}
</div>

以下是代码段。这里最初有6个不同的数组，并假设所有数组都包含各种数据。

而其余的代码都在render函数中。

有人可以让我知道如何格式化JSX代码，因为代码有很多重复。

如何只写一个FormGroup和FormControlLabel并将其分配给不同的数组，并且onClick wodul返回该特定id的checkBox名称和id。

问候

Answer 1

尝试这样的事情

let arrays = ['typeOpt','specialityOpt',...]

{ arrays.map((itemOpt) => (
<div>
    {itemOpt.map((itemOp,index) => (
    <FormGroup row>

        <FormControlLabel
        control={
            <Checkbox
            checked={this.state.checkedItem}
            onChange={this.handleChange('checkedItem')}
            value="checkedB"
            color="primary"
            />
        }
        label={itemOp.label}
        />

    </FormGroup>
    ))}
</div>
)}