React Component 오브젝트에 키를 추가하는 방법

Question

트리 스타일의 HTML을 만들려고합니다. (React 포함)

이것은 Node 클래스이며 자식 노드를 포함합니다.

class Node extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      children: [] 
     }; 
    } 

    render() { 
     return <div id={this.props.id} className="person"> 
        <div className="info"> 
         <div className="name">{this.props.name}</div> 
        </div> 
        <div className="childrenWrap"> 
         <div className="children"> 
          {this.state.children} 
         </div> 
        </div> 
       </div>; 
    } 

    addChild(node) { 
     this.setState({children: this.state.children.concat(node)}); 
    } 
} 

////////////// 

let tree = document.querySelector("#tree"); 
let root = ReactDom.render(<Person id="root" name="A" />, tree); 
root.addChild(<Person id="child1" name="B" />); 
root.addChild(<Person id="child2" name="C" />); 
root.addChild(<Person id="child3" name="D" />); 

경고 : '배열이나 반복기의 각 하위에는 고유 한 "키"소품이 있어야합니다.'

key={this.props.id} 다음에 id={this.props.id}을 추가하십시오.
하지만 해결되지 않음이 문제를 어떻게 해결할 수 있습니까?

Answer 1

문제는 부모 구성 요소가 아니라 자녀의 구성 요소

으로이 문제를 해결할 수 있습니다

하지만 내 생각에 당신은 아주 나쁜 방법으로 문제를 접근하고

root.addChild(<Person id="child1" key="child1" name="B" />); 
root.addChild(<Person id="child2" key="child2" name="C" />); 
root.addChild(<Person id="child3" key="child3" name="D" />); 

- state에 전체 렌더링 된 요소를 유지하지 말고, 렌더링에 필요한 데이터 만 가져야합니다. render 트리를 만들어야합니다.

Answer 2

키는 고유해야합니다. id 값으로 설정하지 않으시겠습니까?

root.addChild(<Person id="child1" key="child1" name="B" />);