리액트 렌더 메서드의 루프용

리액트 렌더 메서드의 루프용

이 질문에는 이미 답변이 있습니다.

리액트 JSX 내부 루프 (84회답)

루프 인 리액트 (1개의 답변)

닫힘7년 전.

내 그리드에 대한 페이징 링크를 만들고 싶다.maxPages(number) 속성을 컴포넌트에 전달하지만 렌더 메서드에서 를 사용할 수 없습니다.내가 뭘 할 수 있을까?

var Pagination = React.createClass({

render: function(){


    return(
    <div class="text-center">
        <ul class="pagination">

            <li><a href="#">«</a></li>
            {for (var i=0;i <10;i++;)
            {
              return( <li><a href="#">i + 1 </a></li>);
            }
            }

            <li><a href="#">»</a></li>
        </ul>
    </div>);

}});

렌더링 전에 루프를 실행할 수 있습니다(예: 에러가 있습니다).for루프)

var lis = [];

for (var i=0; i<10; i++) {
    lis.push(<li><a href="#">{i + 1}</a></li>);
}

var Pagination = React.createClass({
    render: function(){
        return(
            <div class="text-center">
                <ul class="pagination">

                    <li><a href="#">«</a></li>
                    {lis}
                    <li><a href="#">»</a></li>
                </ul>
            </div>
        );
    }
});

바이올린을 켜다

표현식은 JSX에만 포함할 수 있습니다.

<ul className="pagination">{children}</ul>

변환되는 것 같은 것

React.createElement('ul', {className: 'pagination'}, children);

이제 알겠니? 네가 어떻게 절대 가질 수 없었는지for대신 루프하다children? 문은 함수 호출 식 안에 있을 수 없습니다.

답변에 나타난 adeno와 같이 미리 배열을 작성할 수 있습니다.

언급URL : https://stackoverflow.com/questions/29859380/for-loop-in-react-render-method