reactjs – React – 将数据映射到map函数期间形成的行

我有一个名为Cells的组件,它使用从flux存储中获取的数据进行渲染.我的问题是我想将这些数据渲染到特定的行,但由于我渲染行的方式(它们是动态的,所以你可以将它们添加到表中),我很难给出行标识符,单元格组件可以渲染成.我希望这是有道理的！

这是代码：

细胞成分：

import React from 'react';

export default class Cells extends React.Component {
    render() {
        return (
            <td>{this.props.value}</td>
        );
    }
}

表组件：

import React from 'react';
    import TableHeader from './TableHeader.jsx';
    import Cells from './Cells.jsx';
    import RowForm from './RowForm.jsx';
    import {createRow} from '../../actions/DALIActions';
    import AppStore from '../../stores/AppStore';

    export default class Table extends React.Component {
        state = {rows: [], cellValues: [], isNew: false, isEditing: false};
        updateState = () => this.setState({cellValues: AppStore.getCellValues()});

        componentWillMount() {
            AppStore.addChangeListener(this.updateState);
        }

        handleAddRowClickEvent = () => {
            let rows = this.state.rows;
            rows.push({isNew: true});
            this.setState({rows: rows});
        };

        handleEdit = (row) => {
            this.setState({isEditing: true});
        };

        editStop = () => {
            this.setState({isEditing: false});
        };

        handleSubmit = (access_token, id, dataEntriesArray) => {
            createRow(access_token, id, dataEntriesArray);
        };

        componentWillUnmount() {
            AppStore.removeChangeListener(this.updateState);
        }

        render() {

            let {rows, cellValues, isNew, isEditing} = this.state;

            let headerArray = AppStore.getTable().columns;

            let cells = this.state.cellValues.map((value, index) => {
                return (
                    <Cells key={index} value={value.contents} />
                );
            });

            return (
                <div>
                    <div className="row" id="table-row">
                        <table className="table table-striped">
                            <thead>
                                <TableHeader />
                            </thead>
                            <tbody>
//////////// This is where the render of the data would happen/////////////
                                {rows.map((row, index) => this.state.isEditing ?
                                    <RowForm formKey={index} key={index} editStop={this.editStop} handleSubmit={this.handleSubmit} /> :
                                    <tr key={index}>
                                        {this.state.cellValues ? cells : null}
                                        <td>
                                            <button className="btn btn-primary" onClick={this.handleEdit.bind(this, row)}><i className="fa fa-pencil"></i>Edit</button>
                                        </td>
                                    </tr>
                                )} 
                   ///////////////End/////////////////
                            </tbody>
                        </table>
                    </div>
                    <div className="row">
                        <div className="col-xs-12 de-button">
                            <button type="button" className="btn btn-success" onClick={this.handleAddRowClickEvent}>Add Row</button>
                        </div>
                    </div>
                </div>
            );
        }
    }

我知道这可能不是实现我想要的最佳方式(任何有关这方面的提示也会受到赞赏),但它是我现在必须要做的事情！

任何帮助将不胜感激,尤其是示例！

谢谢你的时间！

我没有让一个包含行标题的对象(行)和包含所有行(单元格值)的所有单元格的另一个对象,而是建议您以某种方式将单元格数据放入单个行数据中,以便您的数据结构看起来像这样：

rows = [
  { rowID: 100, cells: [
      { cellID: 101, value: 'data' },
      { cellID: 102, value: 'data' }
    ]
  },
  { rowID: 200, cells: [
      { cellID: 201, value: 'data' },
      { cellID: 202, value: 'data' }
    ]
  }
]

这样,您每行传递cellValues,这允许您每行具有不同的单元格.

为< Row>创建一个单独的组件,它呈现：

return 
  <tr>
    {this.props.cells.map( cell => { 
        return <Cell key={cell.cellID} value={cell.value} />
    })}
  </tr>

并改变< tr>位于主渲染中的位：

<Row key={row.keyID} cells={row.cells}/>

最后：对key使用索引是个坏主意,如key = {i}.使用唯一标识单元格/行内容的键.

更新：典型情况是首先在前端创建单元格或行,并且仅在发布到数据库后获取其数据库ID.
仍然获得密钥的唯一ID的选项是：

>在创建反应中的单元格或行时,以时间戳的形式为单元格/行提供唯一的ID.从数据库获取响应后,将时间戳替换为官方数据库密钥. (这是当您执行乐观更新时：临时显示新行,直到数据库为您提供官方行).
>不要显示行/单元格,直到从具有官方ID的服务器获得响应
>通过散列所有单元格/行内容的内容来创建唯一键(如果您非常确定单元格/行内容可能不相同)

希望这可以帮助.