ng-repeat에 대한 반응 등가

ng-repeat에 대한 반응 등가

React.js는 처음입니다.데이터 어레이를 바인드하려고 합니다.ng-repeat에 상당하는 것을 찾고 있습니다만, 문서에는 없습니다.

예:

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

angular를 사용하면 다음과 같은 작업을 html에서 수행할 수 있습니다.

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

리액트의 가격인상이 궁금해요.

리액트에서는 필요한 JavaScript를 작성하기만 하면 됩니다(또한 이 JavaScript를 재사용 가능한 컨트롤로 구축할 수도 있습니다).기본 패턴(및 Angular와 어떻게 다른지)을 익히면 매우 규범적이고 쉽게 실행할 수 있습니다.JS)

그래서...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);

여기 사용 중입니다.

또한 목록에서 "반복"할 수 있는 재사용 가능한 구성 요소를 신속하게 구축할 수 있습니다.

다음과 같이 해야 합니다.

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

다음은 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 반복입니다.

반응 구성요소 내의 렌더 함수에서는 다음을 수행할 수 있습니다.

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

이제 data Component를 반환할 수 있습니다.

React에서 ng-repeat과 같은 작업을 수행하려면 원어민적인 생각만 하면 됩니다.ng-repeat는 네이티브 Javascript 반복기를 사용합니다.동일한 종류의 네이티브 반복기를 React에서 직접 사용할 수 있습니다.예를 들어 Array.map을 사용합니다.

var RepeatModule = React.createClass({
  getInitialState: function() {
    return { items: [] } 
  }, 
  render: function() {

    var listItems = this.props.items.map(function(item) {
      return (
        <li key={item.name}> 
          <a href={item.link}>{item.name}</a> 
        </li> 
      ); 
    }); 

    return (
      <div> 
        <ul> 
          {listItems} 
        </ul> 
      </div> 
    ); 
  } 
});

위의 예는 http://angulartoreact.com/ng-repeat-react-equivalent 에서 입수했습니다.이 사이트에는 각도 지시어에 대한 반응 등가의 더 많은 예가 있습니다.

레퍼런스URL : https://stackoverflow.com/questions/28994378/react-equivalent-for-ng-repeat