Question

我想在JSX内部生成带有for循环的行（例如：10行）。并且在该行的元素之一内部有一个计数器，该计数器将显示该行的索引。

<Grid container>
    <GridItem xs={3} sm={3} md={3}>
       Key {counterOfRowIndex}
    </GridItem>
    <GridItem xs={7} sm={7} md={7}>
       <input type="text"/>
    </GridItem>
    <GridItem xs={2} sm={2} md={2}>
       <FormControlLabel
          control={
            <Checkbox
               checked={this.state.checked}
               onChange={this.handleChangeCheck('checked')}
               value={checked}
            />
          }
       />
    </GridItem>
</Grid>

http://prntscr.com/m6f2rn

这是我的预期结果

Answer 1

您可以使用.map()方法来代替for循环，该方法将通过使用现有数组中的元素来生成新的项目数组。

您可以做类似的事情

<Grid container>
    yourArray.map((item, index) => {
        return(
           <GridItem xs={3} sm={3} md={3}>
                Key {index + 1}
           </GridItem>
           <GridItem xs={7} sm={7} md={7}>
                <input type="text"/>
           </GridItem>
           <GridItem xs={2} sm={2} md={2}>
           <FormControlLabel
               control={
            <Checkbox
               checked={this.state.checked}
               onChange={this.handleChangeCheck('checked')}
               value={checked}
            />
          }
          />
           </GridItem>
     )
    })
</Grid>

Answer 2

您可以尝试以下方法：

const arrayOfNumbers = Array.from(Array(10).keys());
<Grid container>
  {arrayOfNumbers.map(currentVal => 
     <React.Fragment>
       <GridItem xs={3} sm={3} md={3}>
           Key {currentVal}
        </GridItem>
        <GridItem xs={7} sm={7} md={7}>
           <input type="text"/>
        </GridItem>
        <GridItem xs={2} sm={2} md={2}>
           <FormControlLabel
              control={
                <Checkbox
                   checked={this.state.checked}
                   onChange={this.handleChangeCheck('checked')}
                   value={checked}
                />
              }
           />
        </GridItem>
     <React.Fragment>
  )}
</Grid>

Answer 3

所以您在这里还有其他有效的答案，但这是一种使用更多结构呈现这些行的方法。 与其他人基本上相同，但将您要做的事情推向目标的位置。

class Row extends React.Component {
    render () {
        return (
            <React.Fragment>
                <GridItem
                    xs={3}
                    sm={3}
                    md={3}
                    key={`col-1`}>
                    {this.props.children}
                </GridItem>
                <GridItem
                    xs={7}
                    sm={7}
                    md={7}
                    key={`col-2`}>
                    <input type="text" />
                </GridItem>
                <GridItem
                    xs={2}
                    sm={2}
                    md={2}
                    key={`col-3`}>
                    <FormControlLabel
                        control={
                            <Checkbox
                                checked={this.state.checked}
                                onChange={this.handleChangeCheck}
                                value={checked}
                            />
                        }
                    />
                </GridItem>
            </React.Fragment>
        );
    }

    handleChangeCheck = index => {
        return this.props.onChangeCheck(index);
    }
}

class Table extends React.Component {
    render () {
        const rows = Array.from(Array(10).keys());

        // This below expects `this.handleChangeCheck('checked')` to return a new function accepting the row index as its param.
        const rowEls = rows.map(( row, i ) => (
            <Row
                key={`row-${i}-${row}`}
                onChangeCheck={this.handleChangeCheck('checked')}>
                Key {i}
            </Row>
        ));

        return (
            <Grid container>
                {rowEls}
            </Grid>
        );
    }
}

For循环生成行并在jsx中添加计数器

3 个答案: