使用数组映射功能

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的复选框名称和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>
)}