함수 구성요소를 반응 객체로 처리할 때 오류: 객체가 유효한 React 하위 요소가 아닙니다(발견: 키가 있는 객체)

Question

Alert 구성 요소를 렌더링하려고 합니다. 상위 구성 요소에서 소품이 전달되면 렌더링해야 하는데 오류가 발생합니다.

잡히지 않은 오류: 개체는 유효한 React 하위 요소가 아닙니다(발견: {message, showAlerts} 키가 있는 개체. 하위 요소 컬렉션을 렌더링하려면 대신 배열을 사용하세요.

React가 왜 내 함수 구성요소를 객체로 취급하는지 잘 모르겠습니다. 코드 샌드박스 링크: https://codesandbox.io/s/exciting-smoke-mij6ke?file=/src/App.js:0-3054

상위 구성 요소는 다음과 같습니다.

으아아아

하위 구성요소:

으아아아

내가 여기서 뭘 잘못하고 있고 무엇을 바꿔야 하나요?

저는 허용된다고 생각되는 방식으로 Alerts의 하위 구성 요소를 렌더링해 보았습니다. Alert 구성 요소는 버튼을 클릭할 때 경고 상자를 렌더링하고 열어야 합니다. 경고를 닫을 때 경고를 표시하는 상위 구성 요소(showAlerts)의 상태 변수도 'false'로 변경되어야 합니다.

Answer 1

다음 문장을 중국어로 번역하고 html 코드를 유지하며 새 내용을 추가할 필요가 없습니다.

으아악

는 다음과 같이 됩니다:

으아악

props는 항상 객체이고 첫 번째 매개변수로 전달되기 때문입니다.

매개변수 목록에서 중괄호를 사용한다는 것은 첫 번째 매개변수(예: props 매개변수)를 구조화한다는 의미입니다.