리액션이 있는 루프에는 어떻게 사용합니까?

리액션이 있는 루프에는 어떻게 사용합니까?

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

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

매핑할 객체 배열 없이 React.js에서 요소를 루프하고 렌더링하려면 어떻게 해야 합니까? (6개의 답변)

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

닫힘5년 전에요.

저는 매우 새로운 응답자이기 때문에, 어레이내의 각 유저의 메뉴 항목 요소를 작성하기 위한 간단한 for 루프가 필요합니다.이러한 루프는, 유저의 이름이 「이름」으로 되어 있습니다.이렇게 쓰는데 어떻게 반응해야 할지 모르겠어요.지도와 함께 있어야 할 것 같은데 잘 안 될 것 같아. 여기 있는 누군가가 날 도와줄 수 있으면 좋겠는데.

for (var i = 0; i < Users.length; i++) {
  <MenuItem eventKey=[i]>User.firstname[i]</MenuItem>
}

그render구성 요소의 메서드 또는 상태 비저장 구성 요소 함수는 렌더링할 요소를 반환합니다.

루프를 사용하고 싶은 경우는, 다음과 같이 괜찮습니다.

render() {
    let menuItems = [];
    for (var i = 0; i < Users.length; i++) {
        menuItems.push(<MenuItem eventKey=[i]>User.firstname[i]</MenuItem>);
    }
    return <div>{menuItems}</div>;
}

일반적으로 맵을 사용하여 요소의 배열을 반환하는 등 보다 기능적인 스타일을 볼 수 있습니다.

render() {
    return <div>
    {
        Users.map((user, i) =>
            <MenuItem eventKey=[i]>User.firstname[i]</MenuItem>)
    }
    </div>;
}

어느 경우든, 이 명령어를 놓치고 있는 것에 주의해당하는 것입니다.key경고를 표시할 수 있습니다.배열의 각 요소에는 고유한 키(가능하면 배열 색인뿐만 아니라 ID 형식)가 있어야 합니다.

맵을 사용하여 다음 작업을 수행할 수 있습니다.

Users.map((user, index) => (
  <MenuItem eventKey={index}>user.firstname</MenuItem>
));

언급URL : https://stackoverflow.com/questions/46908480/how-do-i-use-for-loops-with-react