Question

我是React.js的新手。我试图绑定数据数组。我正在寻找相当于ng-repeat，但我无法在文档中找到它。

e.g：

var data =  ['red', 'green', 'blue']

使用angular我会在我的html中做到这样的事情：

<div ng-repeat="i in data">{{i}}</div>

我想知道React的标记要做到这一点

Answer 1

在React中，您只需编写必要的JavaScript（并可能将其构建为可重复使用的控件，如您所见）。一旦你学习了基本模式（以及它们与AngularJS的不同之处），这是非常规范和易于理解的。

因此，在render函数中，您需要遍历列表。在下面的示例中，我使用了map，但您可以根据需要使用其他迭代器。

var List = React.createClass({
    render: function() {
        return (<div>
        { this.props.data.map(function(item) {
                return <div>{item}</div>
            })
        }
        </div>);
    }
});

var data =  ['red', 'green', 'blue'];

React.render(<List data={ data }  />, document.body);

Here它正在使用中。

而且，正如您所看到的，您可以快速构建一个可重复使用的组件，该组件可以重复＆＃34;通过清单。

Answer 2

应该是：

{data.map(i => <div>{i}</div>)}

Answer 3

以下是使用ES6和无状态组件的示例。

以下代码演示了如何通过循环浏览菜单项列表来创建菜单。

import React from 'react';
import Menu from 'material-ui/lib/menus/menu';
import MenuItem from 'material-ui/lib/menus/menu-item';


const menuItems = [
    {route: '/questions', text: 'Questions'},
    {route: '/jobs', text: 'Jobs'},
    {route: '/tags', text: 'Tags'},
    {route: '/users', text: 'Users'},
    {route: '/badges', text: 'Badges'}
    {route: '/questions/new', text: 'Ask Question'}

].map((item, index) => <MenuItem key={index} primaryText={item.text} value={item.route} />);


const Sidebar = ({history}) => (
    <Menu
        autoWidth={false}
        onItemTouchTap={(e, child) => history.push(child.props.value)}
    >
        {menuItems}
    </Menu>
);


export default Sidebar;

基本上我们正在做的只是使用Array.map的纯javascript迭代。

Answer 4

在react组件内的渲染函数中，您可以执行以下操作：

var data =  ['red', 'green', 'blue'];
var dataComponent = [];
data.forEach(function (dataValue) {
    dataComponent.push(<div> {dataValue} </div>);
});

现在你可以返回dataComponent。

Answer 5

要在React中执行与ng-repeat相同的任务，您只需要本地思考。在引擎盖下ng-repeat只是使用本机Javascript迭代器。您可以直接在React中使用相同类型的本机迭代器。例如，我将使用Array.map：

      <table border="1">
          <thead>
              <tr>
                 <th> No </th>
                 <th> Name </th>
                 <th> Mare </th>
              </tr>
          </thead>

          <tbody>
              <tr>
                 <td rowspan="2"> 1 </td>
                 <td> Me </td>
                 <td> ! </td>
              </tr>
              <tr>
                 <th colspan="3"> Comment </th>
              </tr>
          </tbody>

          <tbody>
              <tr>
                 <td rowspan="2"> 2 </td>
                 <td> You </td>
                 <td> ! </td>
              </tr>
              <tr>
                 <td colspan="3"> Comment </td>
              </tr>
          </tbody>

          <tbody>
              <tr>
                 <td rowspan="2"> 3 </td>
                 <td> We </td>
                 <td> ! </td>
              </tr>
              <tr>
                 <td colspan="3"> Comment </td>
              </tr>
          </tbody>
        
      </table>

我从http://angulartoreact.com/ng-repeat-react-equivalent得到了上面的例子。该网站有更多与Angular指令相当的React实例。

Answer 6

如果您正在寻找与React更加接近的ng-repeat等效项，则可能需要尝试Tersus-jsx.macro-我创建的一个模块，用于在React中提供Angular的ng-if和ng-repeat功能，而无需混合JSX表达式和ES6，确实更好。

所以在React中进行重复的典型方式是这样的：

<div>
   {list.map(i => (
     <button
       id="gotoA"
       className="link"
       onClick={clicking}
     />
  )}
</div>

如果使用Tersus-jsx.macro，则可以简单地为prop定义tj-，就像AngularJS中的ng-repeat一样：

<div>
  <button
    tj-for={list}
    id="gotoA"
    className="link"
    onClick={clicking}
  />
</div>

由于开箱即用的最新版本的create-react-app支持Babel-Macro，因此您所需要做的就是npm安装此模块，用“ tersus”包装渲染返回并开始分配道具。它还具有ng-if支持（tj-if），并且可以与tj-for混合使用。

您可以从以下位置安装它： https://www.npmjs.com/package/tersus-jsx.macro

对ng-repeat的反应等效

6 个答案: