React
반응하는 열쇠

소개

비고

요소의 id 사용하기

여기에 우리 구성 요소의 소품으로 전달되는 할 일 항목 목록이 있습니다.

할 일 항목마다 텍스트 및 id 속성이 있습니다. id 속성이 백엔드 데이터 저장소에서 왔으며 고유 한 숫자 값이라고 가정합니다.

todos = [
  {
    id: 1,
    text: 'value 1'
  },
  {
    id: 2,
    text: 'value 2'
  },
  {
    id: 3,
    text: 'value 3'
  },
  {
    id: 4,
    text: 'value 4'
  },
];

반응 된 각 목록 요소의 키 속성을 todo-${todo.id} 하여 반응자가 내부적으로 식별 할 수있게합니다.

render() {
  const { todos } = this.props;
  return (
    <ul>
      { todos.map((todo) =>
        <li key={ `todo-${todo.id}` }>
          { todo.text }
        </li>
      }
    </ul>
  );
}

배열 인덱스 사용하기

고유 한 데이터베이스 ID가 없다면 다음과 같이 배열의 숫자 인덱스를 사용할 수도 있습니다.

render() {
  const { todos } = this.props;
  return (
    <ul>
      { todos.map((todo, index) =>
        <li key={ `todo-${index}` }>
          { todo.text }
        </li>
      }
    </ul>
  );
}