如何渲染重复的 React 元素？

IT技术 javascript reactjs
2021-02-27 23:18:32

我已经写了一些代码来渲染 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在模板代码或一些类似的方法中嵌入循环。）

5个回答

您可以将表达式放在大括号内。注意在编译的 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);
              })
            )
          );
        })
      )
    )
  );
}
@ssorallen 感谢您的回答。在接受您的答案之前，我会将这个问题保留几天，以防万一有更好的方法来做到这一点。我认为我的问题是 JSX 似乎没有非表达式转义、forfor循环等，也没有循环的模板语法。
2021-04-15 23:18:32
@chrisdew JSX 不是模板语言，它是普通 JavaScript 的语法糖。您不会像从模板语言中期望的那样获得运算符。尝试将此答案中的代码粘贴到实时JSX 编译器中，以了解它在做什么以及为什么for永远不可能出现循环。
2021-05-02 23:18:32
您可以为每一行添加 onClick 事件并将行项目传递给函数吗？我正在尝试这样的事情，但我得到了 Uncaught TypeError: Cannot read property 'clickHandler' of undefined clickHandler() { console.log('on click row'); } <tbody> {this.props.rows.map(function(row, i) { return ( <tr key={i} onClick=this.clickHandler()> {row.map(function(col, j) { return <td key={j}>{col}</td>; })} </tr> ); })} </tbody>
2021-05-05 23:18:32
不错的收获。我加了括号丢失在顶部，并从切换for到map。由于我不知道每个数据结构中的数据是什么，我假设行是数组并使用key. 从数组中添加/删除数据时，将导致不必要的重新渲染。您应该切换key到唯一标识数据并且不依赖于数组的顺序和/或大小的值。
2021-05-06 23:18:32
没关系我已经将 .bind(this) 添加到 map 方法然后该方法涉及每一行。谢谢你。
2021-05-12 23:18:32

由于Array(3)将创建一个不可迭代的数组，因此必须填充它以允许使用mapArray 方法。“转换”的一种方法是在数组括号内破坏它，这会“强制”用undefined值填充数组，与Array(N).fill(undefined)

<table>
    { [...Array(3)].map((_, index) => <tr key={index}/>) }
</table>

另一种方法是通过 Array fill()：

<table>
    { Array(3).fill(<tr/>) }
</table>

⚠️ 上面例子的问题是缺少keyprop，这是必须的。
（不推荐使用迭代器的indexas key）

嵌套节点：

const tableSize = [3,4]
const Table = (
    <table>
        <tbody>
        { [...Array(tableSize[0])].map((tr, trIdx) => 
            <tr key={trIdx}> 
              { [...Array(tableSize[1])].map((a, tdIdx, arr) => 
                  <td key={trIdx + tdIdx}>
                  {arr.length * trIdx + tdIdx + 1}
                  </td>
               )}
            </tr>
        )}
        </tbody>
    </table>
);

ReactDOM.render(Table, document.querySelector('main'))
td{ border:1px solid silver; padding:1em; }
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<main></main>

我花了至少 2 个小时才能在渲染函数的循环内循环。谢谢。你救了我的一天。
2021-04-17 23:18:32
你不能这样做而不是使用地图吗？ Array.from({length: 5}, (value, index) => <tr />)
2021-04-29 23:18:32

为了扩展 Ross Allen 的答案，这里有一个使用 ES6 箭头语法的更简洁的变体。

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

它的优点是 JSX 部分是隔离的（没有return或;），更容易在它周围放置一个循环。

这是，imo，最优雅的方式（使用 ES6）。用 7 个索引实例化你的空数组并在一行中映射：

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

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

好的！看来你也可以Array(...Array(10)).map((v, i) => <SomeComponent />)
2021-04-17 23:18:32

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

// 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 的替代方案是柯里化的 map 函数，但人们往往回避柯里化。

这些函数不会给开发人员指定key属性的机会。使用索引意味着添加/删除元素将强制重新渲染可能未更改的对象。
2021-04-20 23:18:32
同意，如果有必要，确保密钥在任何给定级别都是唯一的很容易，我喜欢它。
2021-05-06 23:18:32
没错，但 95% 的时间基于索引的键就足够了。我宁愿对一些罕见的例外情况稍稍回避一下。
2021-05-14 23:18:32
其它你可能感兴趣的问题
上一篇Promise：then vs then + catch 下一篇在 JSONP 和 jQuery 中使用 PUT/POST/DELETE