在 React 中通过二维数组循环和 return

Question

我正在尝试将二维数组显示为 table，但我不完全确定我将如何使用 React 来实现这一点。此代码目前仅输出第一行，我尝试将二维数组作为一个整体返回，但这也不起作用。

var DisplayRow = React.createClass({

    getDefaultProps: function() {
        return {
            columns: []
        };
    },

    render: function(){
        console.log(this.props.columns);
        var entries = []
        for (var i = 0; i < this.props.columns.length; i++){
            return( 
                <DisplayElement row={this.props.columns[i]} key={i} />
            );
        };
    }

});

var DisplayElement = React.createClass({
    getDefaultProps: function(){
        return {
            row: []
        };
    },

    render: function(){
        console.log(this.props.row);
        var elements = []
        for (var i=0; i < this.props.row.length; i++){
            elements.push(<td> {this.props.row[i]} </td>);
        }
        return (
            <tr> {elements} </tr>
        )
    }
});

Answer 1

可能是这样的，其中 SnipsView 是行，SnipsListItem 是列。

class SnipListItemRender extends React.Component {
 render() {
  let snipSpanColor = (this.props.index === this.props.selectedKey) ? '#b58900' : '#afac87';
  return (
   <div id='SnipDivSty' onclick={this.snipClickHandler} className="FlexBox" style={SnipDivSty}>
    <div id='SelectSnipDivSty' style={SelectSnipDivSty}>
     <JButton btn={selectSnipBtn} parentClickHandler={this.snipClickHandler} />
    </div>
    <span id='SnipSpanSty' style={{color: snipSpanColor, width: 'calc(70% - 142px)'}}>{this.props.snippet.snip}</span>
    <JButton btn={SnipBtn} parentClickHandler={this.snipClickHandler} />
   </div>
  );
 }
}

class SnipListItem extends SnipListItemRender {
 snipClickHandler = (buttonid) => { Actions.selectSnipItem(this.props.snippet, buttonid); }
}

let _snipDataMap = function(snip, index) {
 return (
  <li id='SnipsDivLiSty' key={index} style={SnipsDivLiSty}>
   <SnipListItem snippet={snip} index={index} selectedKey={this.props.selectedKey} />
  </li>
 );
}

export default class SnipsView extends React.Component {
 render() {
  let list = this.props.data.map(_snipDataMap, this)
  return (
   <div id='SnipsDivSty' style={SnipsDivSty}>
    <ul id='SnipsDivUlSty' style={SnipsDivUlSty}>
        {list}
    </ul>
   </div>
  );
 }
}

Answer 2

用更简洁的代码解决了这个问题：

var DisplayRow = React.createClass({
    getDefaultProps: function(){
        return {
            columns: []
        };

    },
    render: function(){
        var rows = this.props.columns.map(function (item, i){
            var entry = item.map(function (element, j) {
                return ( 
                    <td key={j}> {element} </td>
                    );
            });
            return (
                <tr key={i}> {entry} </tr>
             );
        });
        return (
            <table className="table-hover table-striped table-bordered">
                <tbody>
                    {rows}
                </tbody>
            </table>
        );
    }
});

在 React 中通过二维数组循环和 return

Loop and return through 2d array in React

reactjs

react-jsx