时间戳

首页 > 解决方案 > 使用数组映射函数将 JSX 格式化为渲染

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

问题描述

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 个不同的数组，并假设所有的数组都包含各种数据。

以及渲染函数中的其余代码。

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

如何只编写一个 FormGroup 和 FormControlLabel 并将其放入不同的数组中，然后 onClick wodul 返回该特定 id 的复选框名称和 id。

问候

标签： reactjs

解决方案

尝试这样的事情

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>
)}

推荐阅读