sourcecode

리액트 JSX 내부 루프

copyscript 2022. 9. 14. 22:22

리액트 JSX 내부 루프

React JSX에서 다음과 같은 작업을 수행하려고 합니다(ObjectRow는 별도의 구성 요소임).

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

JSX가 함수 호출에 매핑되어 있기 때문에 이것이 왜 유효한 JSX가 아닌지 알고 있습니다.다만, 템플릿 랜드에서 온 것과 JSX를 처음 접하는 것에 의해서, 상기의 실현 방법(컴포넌트를 여러 번 추가하는 것)을 확신할 수 없습니다.

자바스크립트 하면 안 요.for「」「」、「」、「」

return tbody(
    for (let i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

의 해 주세요.tbodyfor 에러.loop으로

그러나 배열을 만들고 이를 인수로 전달할 수 있습니다.

const rows = [];
for (let i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

기본적으로 JSX를 사용할 때 다음과 같은 구조를 사용할 수 있습니다.

const rows = [];
for (let i = 0; i < numrows; i++) {
    // note: we are adding a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

덧붙여서, JavaScript의 예는 JSX의 변환 예와 거의 일치합니다.Babel REPL을 사용하여 JSX의 작동 방식을 알아보십시오.

이것이 당신의 상황에 도움이 될지는 모르겠지만, 종종 지도가 좋은 답입니다.

이것이 for 루프를 사용한 코드인 경우:

<tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    }
</tbody>

지도와 함께 다음과 같이 쓸 수 있습니다.

<tbody>
    {objects.map(function(object, i){
        return <ObjectRow obj={object} key={i} />;
    })}
</tbody>

ES6 구문:

<tbody>
    {objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>

" " " 에 대한 아직 경우map()예를 들어 @FakeRainBrigand의 답변과 같은 경우 소스 레이아웃이 @SophieAlpert의 답변보다 가까운 출력에 대응하도록 인라인화합니다.

ES2015(ES6) 구문 포함(확산 및 화살표 기능)

http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview

<tbody>
  {[...Array(10)].map((x, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

참조: Babel로 번역하면 경고 페이지에 다음과 같이 표시됩니다.Array.from에서는 (「」「」「」, 「」)v5.8.23 것 Array저는 그것을 명확히 하기 위해 문서화를 공개하고 있습니다.단, 본인 부담 또는 폴리필 사용.

바닐라 ES5

`Array.apply`

<tbody>
  {Array.apply(0, Array(10)).map(function (x, i) {
    return <ObjectRow key={i} />;
  })}
</tbody>

인라인 IIFE

http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview

<tbody>
  {(function (rows, i, len) {
    while (++i <= len) {
      rows.push(<ObjectRow key={i} />)
    }
    return rows;
  })([], 0, 10)}
</tbody>

다른 답변의 기술 조합

출력에 따라 소스 레이아웃을 유지하되 삽입된 부분을 더 작게 만듭니다.

render: function () {
  var rows = [], i = 0, len = 10;
  while (++i <= len) rows.push(i);

  return (
    <tbody>
      {rows.map(function (i) {
        return <ObjectRow key={i} index={i} />;
      })}
    </tbody>
  );
}

구문 및 ES2015 。`Array`

★★★★★★★★★★★★★★★★ Array.prototype.fill위의 그림과 같이 스프레드를 사용하는 대신 이 작업을 수행할 수 있습니다.

<tbody>
  {Array(10).fill(1).map((el, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

할 수 합니다.fill()100%로 하다@ 이전 의 @FakeRainBrigand를 fill()해결책(개정을 보).

`key`

, 「」는keyAttr지만, 그 아이에 접근이 아니다 개발 빌드로 경고를 해 준다.만약 지수가 아이에서 이용 가능하고 싶어 추가 항목을 보강하려면 통과할 수 있다.참고 Lists와 키 논의를 위해.

단순히 ES6 구문과:지도 배열 메서드를 사용하여.

<tbody>
  {items.map(item => <ObjectRow key={item.id} name={item.name} />)} 
</tbody>

마세요key★★★★★★★★★★★★★★★★★★.

그 배열 지도 기능을 이용하는 것은 매우 일상적인 방법 요소 성장을 통해 제품의 반응에 따라 만들기에 다.이것은 좋은 방법은 예쁘고 깔끔한 방법 JSX에 루프 할 보다 효율적인 루프다.아니는 유일한 방법은 하겠지만, 선호하는 방법.

또한 각각의 반복에 대한 고유 Key으로 요구되는 것을 잊지 마세요.그 지도 기능 0에서, 그러나 그것은produced 인덱스를 사용하여, 그러나 값이 독특한 열쇠는 독특하다, 당신은 그것들을 사용할 수 있는 권장 아닙니다. 독특한 지수를 만듭니다.

<tbody>
  {numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>

또한, 몇줄에서 MDN 만약 당신이 하지 않잘 아는 지도 기능에서:.

지도 한번 배열에 주문 순서대로 각 요소며, 결과를 통해 새로운 배열을 생성한다. 콜백 이것은 가치 있는 배열의 지표에 대해서만 호출됩니다, 정의되지 않음을 포함한 제공된 콜백 함수를 호출합니다.그것은 배열(그것은, 한 적이 없는 또는이 삭제되었음을 색인, 값이 할당된 적이 없)의 실종된 요소를 위한 호출되지 않습니다.

콜백 3논쟁:요소의 값이 요소의 인덱스, 그 배열 개체로 이동하고 호출됩니다.

만약thisArg 매개 변수를 지도에 제공될 경우 콜백의 이 값으로 사용될 것이다.그렇지 않으면 값이 정의되지 않음에서 이 값으로 사용될 것이다.이 값은 궁극적으로 콜백에 의해 관찰 되어지이 기능이 보를 판단하기 위한 평소 규칙에 따라 결정된다.

지도 이에 따라(비록 콜백, 만약 호출되며, 그렇게 할 수 있)이라고 불리는 배열이 형태를 바꾸지 않는다.

중인lodash, _.times 기능에 유용하다.

import React, { Component } from "react";
import Select from "./Select";
import _ from "lodash";

export default class App extends Component {
  render() {
    return (
      <div className="container">
        <ol>
          {_.times(3, (i) => (
            <li key={i}>repeated 3 times</li>
          ))}
        </ol>
      </div>
    );
  }
}

여러 방법 이걸 하는 것 갈 예정이다.JSX 결국 자바 스크립트에,는 한 그렇게 때는 유효한 자바 스크립트 작성, 당신은 좋을 것을 예상 수집한다.

제 대답은 이미 여기에 제시된 모든 훌륭한 방법을 통합하는 것입니다.

오브젝트 배열이 없는 경우 행 수:

return,, " ", "Array and and를 합니다.Array.prototype.map:

render() {
  return (
    <tbody>
      {Array(numrows).fill(null).map((value, index) => (
        <ObjectRow key={index}>
      ))}
    </tbody>
  );
}

return일반 JavaScript를 루프에 사용합니다.

render() {
  let rows = [];
  for (let i = 0; i < numrows; i++) {
    rows.push(<ObjectRow key={i}/>);
  }
  return (
    <tbody>{rows}</tbody>
  );
}

즉시 호출된 함수 식:

render() {
  return (
    <tbody>
      {(() => {
        let rows = [];
        for (let i = 0; i < numrows; i++) {
          rows.push(<ObjectRow key={i}/>);
        }
        return rows;
      })()}
    </tbody>
  );
}

객체 배열이 있는 경우

return 록,,.map() 를 1개의 오브젝트로 합니다.<ObjectRow>★★★★★★★★★★★★★★★★★★:

render() {
  return (
    <tbody>
      {objectRows.map((row, index) => (
        <ObjectRow key={index} data={row} />
      ))}
    </tbody>
  );
}

return일반 JavaScript를 루프에 사용합니다.

render() {
  let rows = [];
  for (let i = 0; i < objectRows.length; i++) {
    rows.push(<ObjectRow key={i} data={objectRows[i]} />);
  }
  return (
    <tbody>{rows}</tbody>
  );
}

즉시 호출된 함수 식:

render() {
  return (
    <tbody>
      {(() => {
        const rows = [];
        for (let i = 0; i < objectRows.length; i++) {
          rows.push(<ObjectRow key={i} data={objectRows[i]} />);
        }
        return rows;
      })()}
    </tbody>
  );
}

반환 블록 외부에서 추출할 수도 있습니다.

render: function() {
    var rows = [];
    for (var i = 0; i < numrows; i++) {
        rows.push(<ObjectRow key={i}/>);
    } 

    return (<tbody>{rows}</tbody>);
}

React에서 JSX 스타일 템플릿을 몇 가지 지시문(rt-repeat 등)과 함께 사용할 수 있는 React 템플릿을 체크 아웃할 수 있습니다.

react-template를 사용한 경우의 예는 다음과 같습니다.

<tbody>
     <ObjectRow rt-repeat="obj in objects"/>
</tbody>

렌더 메서드의 inside return()을 변환하는 경우 가장 쉬운 옵션은 map() 메서드를 사용하는 것입니다.아래와 같이 map() 함수를 사용하여 배열을 JSX 구문에 매핑합니다(ES6 구문이 사용됩니다).

부모 컴포넌트 내부:

<tbody>
   { objectArray.map(object => <ObjectRow key={object.id} object={object.value} />) }
</tbody>

★★★★★★★★★★★★★★★★★★★★★에 주의해 주세요.key이치키 속성을 지정하지 않은 경우 콘솔에 다음 경고가 표시됩니다.

경고:어레이 또는 반복기 내의 각 자녀는 고유한 "키" 프로펠러를 가져야 합니다.

주의: 사람들이 흔히 저지르는 한 가지 실수는index를를눌눌눌눌눌눌「」를 사용합니다.index여기서 자세히 보실 수 있습니다.즉, 스태틱리스트가 아니면index쇠로삼삼 삼삼삼다다

이제 ObjectRow 구성 요소에서 해당 속성에서 개체에 액세스할 수 있습니다.

ObjectRow 구성 요소 내부

const { object } = this.props

또는

const object = this.props.object

컴포넌트에서 "로 전달한 수 있습니다.objectObjectRow 컴포넌트에 있습니다.이제 목적에 따라 해당 객체의 값을 뱉을 수 있습니다.

참고 자료:

JavaScript의 map() 메서드

ECMAScript 6 또는 ES6

numrows가 배열인 경우 매우 간단합니다.

<tbody>
   {numrows.map(item => <ObjectRow />)}
</tbody>

React의 어레이 데이터 타입이 훨씬 우수합니다.어레이는 새로운 어레이를 백업하거나 필터, 리덕션 등을 지원할 수 있습니다.

'아까부터'를 답이 몇 개 요.map진술.다음으로 FeatureList 컴포넌트 내에서 반복기를 사용하여 Features라고 불리는 JSON 데이터 구조를 기반으로 Feature 컴포넌트를 나열하는 완전한 예를 나타냅니다.

const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
  <div className="feature-list">
    {features.map(feature =>
      <Feature
        key={feature.id}
        {...feature}
        onClickFeature={() => onClickFeature(feature.id)}
        onClickLikes={() => onClickLikes(feature.id)}
      />
    )}
  </div>
);

GitHub에서 FeatureList 코드 전체를 볼 수 있습니다.피쳐 픽스쳐는 다음과 같습니다.

고객님의 주에 일련의 항목이 있다고 가정해 보겠습니다.

[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]

<tbody>
    {this.state.items.map((item) => {
        <ObjectRow key={item.id} name={item.name} />
    })}
</tbody>

여러 번 루프하여 되돌리려면및 을 사용하여 실행할 수 있습니다.

<tbody>
  {
    Array.from(Array(i)).map(() => <ObjectRow />)
  }
</tbody>

어디에i = number of times

렌더링된 구성 요소에 고유한 키 ID를 할당하려면React.Children.toArrayReact 매뉴얼에 제시된 바와 같이

React.Children.toArray

하위 불투명 데이터 구조를 각 하위 항목에 키가 할당된 플랫 배열로 반환합니다.렌더링 메서드에서 하위 집합, 특히 이.props.children을 전달하기 전에 순서를 변경하거나 슬라이스하려는 경우 유용합니다.

주의:

React.Children.toArray()는 하위 목록을 평탄화할 때 중첩된 배열의 의미를 유지하도록 키를 변경합니다.즉, toArray는 반환된 배열의 각 키에 접두사를 붙여 각 요소의 키가 포함된 입력 배열로 범위가 지정되도록 합니다.

<tbody>
  {
    React.Children.toArray(
      Array.from(Array(i)).map(() => <ObjectRow />)
    )
  }
</tbody>

ECMAScript 2015 / Babel 가능성은 JSX의 배열을 생성하기 위해 제너레이터 함수를 사용하고 있습니다.

function* jsxLoop(times, callback)
{
    for(var i = 0; i < times; ++i)
        yield callback(i);
}

...

<tbody>
    {[...jsxLoop(numrows, i =>
        <ObjectRow key={i}/>
    )]}
</tbody>

이 작업은 여러 가지 방법으로 수행할 수 있습니다.

상기와 같이, 이전에return배열 내의 모든 요소를 저장하다

내부 루프return

방법 1: 컨테이너 = [], arr = [1, 2, 3] //모든 배열이 될 수 있음, 객체

arr.forEach((val, index) => {
  container.push(
  <div key={index}>
    val
  </div>)
  /**
  * 1. All loop generated elements require a key
  * 2. only one parent element can be placed in Array
  * e.g. container.push(
  *         <div key={index}>
              val
            </div>
            <div>
            this will throw error
            </div>
        )
  **/
});
return (
  <div>
    <div>any things goes here</div>
    <div>{container}</div>
  </div>
)

방법 2

return (
  <div>
    <div>any things goes here</div>
    <div>
      {
        (() => {
          let container = [];
          let arr = [1, 2, 3] //can be anything array, object
          arr.forEach((val, index) => {
            container.push(
              <div key={index}>
                val
              </div>)
          });
          return container;
        })()
      }
    </div>
  </div>
)

...또는 객체 배열을 준비하여 함수에 매핑하여 원하는 출력을 얻을 수도 있습니다.저는 이것을 선호합니다.왜냐하면, 렌더의 반환에 논리가 없는 코딩의 좋은 관행을 유지하는 데 도움이 되기 때문입니다.

render() {
const mapItem = [];
for(let i =0;i<item.length;i++) 
  mapItem.push(i);
const singleItem => (item, index) {
 // item the single item in the array 
 // the index of the item in the array
 // can implement any logic here
 return (
  <ObjectRow/>
)

}
  return(
   <tbody>{mapItem.map(singleItem)}</tbody>
  )
}

ES2015 Array. from (지도 기능 + 키 포함)

할 일이 없다면.map()사용할 수 있습니다.Array.from()와 함께map요소를 반복하는 기능:

<tbody>
  {Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</tbody>

나는 이것을 사용한다.

gridItems = this.state.applications.map(app =>
          <ApplicationItem key={app.Id} app={app } />
);

PS: 키를 잊지 마십시오.그렇지 않으면 많은 경고가 표시됩니다.

간단하게 사용.map()수집품을 뒤져 돌아오다<ObjectRow>각 반복의 소품이 있는 아이템.

가정하다objects어디엔가 배열이...

<tbody>
  { objects.map((obj, index) => <ObjectRow obj={ obj } key={ index }/> ) }
</tbody>

물론 다른 답변에서 제시한 바와 같이 .map으로 해결할 수 있습니다.이미 Babel을 사용하고 있는 경우 jsx-control-statement를 사용하는 것을 고려할 수 있습니다.

약간의 설정이 필요하지만 가독성 측면에서는 가치가 있다고 생각합니다(특히 비React 개발자용).린터를 사용하면 eslint-plugin-jsx-control-statement도 있습니다.

여기 간단한 해결책이 있습니다.

var Object_rows = [];
for (var i = 0; i < numrows; i++) {
  Object_rows.push(<ObjectRow />);
}
<tbody>{Object_rows}</tbody>;

매핑 및 복잡한 코드는 필요하지 않습니다.행을 배열에 푸시하고 값을 반환하여 렌더링하기만 하면 됩니다.

JSX JavaScript 코드로 됩니다.ReactElement번반환된 변수를 할 수 .JavaScript에서는 함수를 여러 번 호출하여 반환된 변수를 수집할 수 없습니다.

이는 불법입니다. 유일한 방법은 배열을 사용하여 함수 반환 변수를 저장하는 것입니다.

또는 JavaScript ES5 이후 사용 가능한 것을 사용하여 이 상황을 처리할 수도 있습니다.

다른 컴파일러를 작성하여 Angular와 같은 반복 함수를 구현하기 위해 새로운 JSX 구문을 다시 작성할 수 있습니다.

는 프로그래밍 인 ' 로직'을 하는 경향이 .render이렇게 하면 실제로 쉽게 찾을 수 있는 것을 유지할 수 있습니다.

그래서 아마 이렇게 할 거예요.

import _ from 'lodash';

...

const TableBody = ({ objects }) => {
  const objectRows = objects.map(obj => <ObjectRow object={obj} />);      

  return <tbody>{objectRows}</tbody>;
}

물론 이것은 매우 적은 양의 코드이기 때문에 인라이닝은 정상적으로 동작할 수 있습니다.

루프용 리액트에서 .map()을 사용할 수 있습니다.

<tbody>
    { newArray.map(() => <ObjectRow />) }
</tbody>

다음은 React 문서인 JavaScript Expressions as Children의 샘플입니다.

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

당신의 경우는 다음과 같이 쓰는 것이 좋습니다.

function render() {
  return (
    <tbody>
      {numrows.map((roe, index) => <ObjectRow key={index} />)}
    </tbody>
  );
}

키는 매우 중요합니다.React는 키를 사용하여 어레이 내의 데이터를 달리하기 때문입니다.

JSX 코드 내에 JavaScript 구문을 작성하기 때문에 JavaScript 코드를 중괄호로 묶어야 합니다.

row = () => {
   var rows = [];
   for (let i = 0; i<numrows; i++) {
       rows.push(<ObjectRow/>);
   }
   return rows;
}
<tbody>
{this.row()}
</tbody>

나는 그것을 다음과 같이 사용한다.

<tbody>
  { numrows ? (
     numrows.map(obj => { return <ObjectRow /> }) 
    ) : null
  }
</tbody>

다음 자동 호출 함수를 사용할 수도 있습니다.

return <tbody>
           {(() => {
              let row = []
              for (var i = 0; i < numrows; i++) {
                  row.push(<ObjectRow key={i} />)
              }
              return row

           })()}
        </tbody>

For loop 등가(어레이가 아닌 단일 번호)를 원하는 경우 Lodash에서 를 사용하십시오.

수레바퀴를 다시 만들지 말고 코드를 혼란스럽게 만들지 마세요.표준 유틸리티 라이브러리를 사용합니다.

import range from 'lodash/range'

range(4);
// => [0, 1, 2, 3]

range(1, 5);
// => [1, 2, 3, 4]

언급URL : https://stackoverflow.com/questions/22876978/loop-inside-react-jsx

'sourcecode' 카테고리의 다른 글

현재 실행 중인 스크립트를 로드한 스크립트태그는 어떻게 참조할 수 있습니까? (0)	2022.09.14
MariaDB: 시작 후 바로 종료 (0)	2022.09.14
python 다중 반환 값 무시 (0)	2022.09.14
MySQL 빈 테이블에 가입하는 방법 (0)	2022.09.14
MySQL Workbench에서 HeidiSql로 데이터베이스 연결 내보내기 (0)	2022.09.13

현재글리액트 JSX 내부 루프

각종 프로그래밍 정보를 다루는 블로그입니다.

WordPress, Spring-Boot, Java, MySQL, JSON, C, JavaScript, Python, Ajax, jquery, reactjs, MariaDB, vuejs2, mongoDB, php, Powershell, oracle, vuex, angularjs, Git,

Today :
Yesterday :

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

copyscript

리액트 JSX 내부 루프

리액트 JSX 내부 루프

ES2015(ES6) 구문 포함(확산 및 화살표 기능)

바닐라 ES5

`Array.apply`

인라인 IIFE

다른 답변의 기술 조합

구문 및 ES2015 。`Array`

`key`

ES2015 Array. from (지도 기능 + 키 포함)

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

티스토리툴바

리액트 JSX 내부 루프

리액트 JSX 내부 루프

ES2015(ES6) 구문 포함(확산 및 화살표 기능)

바닐라 ES5

Array.apply

인라인 IIFE

다른 답변의 기술 조합

구문 및 ES2015 。Array

key

ES2015 Array. from (지도 기능 + 키 포함)

'sourcecode' 카테고리의 다른 글

'sourcecode'의 다른글

관련글

티스토리툴바

`Array.apply`

구문 및 ES2015 。`Array`

`key`