react.display의 하위 구성요소를 재귀적으로 렌더링하는 방법

react.display의 하위 구성요소를 재귀적으로 렌더링하는 방법

자체 컴포넌트 내에서 반응 컴포넌트를 재귀적으로 추가하려고 했습니다.이 트리 컴포넌트의 예는 하위 Tree Nodes를 통해 매핑하고 하위 노드를 추가하는 것과 같습니다.유감스럽게도 저는 전혀 효과가 없습니다.단순한 코멘트 컴포넌트를 가지면 응답은 같은 컴포넌트를 재사용할 수 있습니다.

var Comment = React.createClass({
  render: function() {    
    return (
        <div className="comment">

          {/* text and author */}
          <div className="comment-text">
            <span className="author">{this.props.author}</span>         
            <span className="body" dangerouslySetInnerHTML={{__html: this.props.body}} />
          </div>

          {/* replies */}
          <div className="replies">
           {
             this.props.replies.map(function(reply) {
               <Comment body={reply.body} author={reply.author} />
             }.bind(this))
          }
          </div>

      </div>
    );
  }
});

다음의 에러 메세지가 표시됩니다.

수집되지 않은 유형 오류: '댓글'을 생성하지 못했습니다. '새' 연산자를 사용하십시오. 이 DOM 개체 생성자를 함수로 호출할 수 없습니다.

컴포넌트에 전달된 JSON 데이터의 예를 다음에 나타냅니다.

{ "author" : "Some user",
  "body" : "<div>Great work</div>",
  "replies" : [ { "author" : "A user replying",
        "body" : "<div Yes it was great work</div>"
      },
      { "author" : "Another user replying",
        "body" : "<div It really was great work!</div>"
      }
    ]
}

ES6의 대체 방법은 다음과 같습니다.

import React, { Component, PropTypes } from 'react'

export default class Comments extends Component {

  render() {

    const { children } = this.props

    return (
      <div className="comments">
        {children.map(comment =>
          <div key={comment.id} className="comment">
            <span>{comment.content}</span>
            {comment.children && <Comments children={comment.children}/>}
          </div>
        )}
      </div>
    )

  }

}

Comments.propTypes = {
  children: PropTypes.array.isRequired
}

다른 컴포넌트도 있습니다.

<Comments children={post.comments}/>

렌더링 메서드의 맨 위에 하위 노드를 개체로 만들면 올바르게 작동합니다.

export default class extends React.Component {
  let replies = null
  if(this.props.replies){
    replies = this.props.replies.map((reply) => {
      return (
        <Comment author={reply.author} body={reply.body} />
      )
    })
  }

  render() {
    return (
      <div className="comment">
        <div className="replies">{ replies }</div>
      </div>
    )
  }
}

가장 쉬운 방법은 클래스의 인스턴스를 반환하는 함수를 클래스에 만드는 것입니다.

Recursive Component.rt.js:

var RecursiveComponent = React.createClass({
 render: function() {
  // JSX
  ....
 },
 renderRecursive: function(param1)
   return React.createElement(RecursiveComponent, {param1: param1});

});

리액트 스위칭라이브러리를 사용하는 경우:

Recursive Component.rt:

<div>
  ...
  <div rt-repeat="recursiveChild in this.props.recursiveItem.recursiveChilds">
            {this.renderRecursive(recursiveChild)}
  </div>
</div>

언급URL : https://stackoverflow.com/questions/28205317/how-to-render-child-components-in-react-js-recursively