如何渲染重复的React元素?

JavaScript

古一达蒙

2020-03-13

我已经编写了一些代码来渲染ReactJS中的重复元素,但是我讨厌它是如此丑陋。

render: function(){
  var titles = this.props.titles.map(function(title) {
    return <th>{title}</th>;
  });
  var rows = this.props.rows.map(function(row) {
    var cells = [];
    for (var i in row) {
      cells.push(<td>{row[i]}</td>);
    }
    return <tr>{cells}</tr>;
  });
  return (
    <table className="MyClassName">
      <thead>
        <tr>{titles}</tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  );
} 

有没有更好的方法来实现这一目标?

(我想for在模板代码或类似方法中嵌入循环。)

第1528篇《如何渲染重复的React元素?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
卡卡西猪猪 2020.03.13

您可以将表达式放在大括号内。注意在已编译的JavaScript中,为什么for在JSX语法中永远不可能实现循环;JSX相当于函数调用和加糖的函数参数。只允许使用表达式。

(此外:请记住将key属性添加到在循环内渲染的组件。)

JSX + ES2015

render() {
  return (
    <table className="MyClassName">
      <thead>
        <tr>
          {this.props.titles.map(title =>
            <th key={title}>{title}</th>
          )}
        </tr>
      </thead>
      <tbody>
        {this.props.rows.map((row, i) =>
          <tr key={i}>
            {row.map((col, j) =>
              <td key={j}>{col}</td>
            )}
          </tr>
        )}
      </tbody>
    </table>
  );
} 

JavaScript

render: function() {
  return (
    React.DOM.table({className: "MyClassName"}, 
      React.DOM.thead(null, 
        React.DOM.tr(null, 
          this.props.titles.map(function(title) {
            return React.DOM.th({key: title}, title);
          })
        )
      ), 
      React.DOM.tbody(null, 
        this.props.rows.map(function(row, i) {
          return (
            React.DOM.tr({key: i}, 
              row.map(function(col, j) {
                return React.DOM.td({key: j}, col);
              })
            )
          );
        })
      )
    )
  );
} 
米亚小哥 2020.03.13

为了扩展Ross Allen的答案,这是使用ES6箭头语法的更简洁的变体。

{this.props.titles.map(title =>
  <th key={title}>{title}</th>
)}

这样做的好处是JSX部分是隔离的(否return;),从而使围绕它的循环更容易。

小胖Sam 2020.03.13

本着函数式编程的精神,让我们通过使用抽象使组件更易于使用。

// converts components into mappable functions
var mappable = function(component){
  return function(x, i){
    return component({key: i}, x);
  }
}

// maps on 2-dimensional arrays
var map2d = function(m1, m2, xss){
  return xss.map(function(xs, i, arr){
    return m1(xs.map(m2), i, arr);
  });
}

var td = mappable(React.DOM.td);
var tr = mappable(React.DOM.tr);
var th = mappable(React.DOM.th);

现在我们可以这样定义渲染:

render: function(){
  return (
    <table>
      <thead>{this.props.titles.map(th)}</thead>
      <tbody>{map2d(tr, td, this.props.rows)}</tbody>
    </table>
  );
}

jsbin


我们的map2d的替代方法是咖喱地图功能,但人们倾向于避开咖喱。

阿飞Pro 2020.03.13

使用imo,这是最优雅的方法(使用ES6)。用7个索引实例化空数组,并在一行中映射:

Array.apply(null, Array(7)).map((i)=>
<Somecomponent/>
)

https://php.quicoto.com/create-loop-inside-react-jsx/表示感谢

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android