반응에서 순수 함수를 사용하는 동안 경고가 표시되지 않는 이유는 무엇입니까?

Question

https://plnkr.co/edit/eCZSo6Rl5odN1hTb6BCW?p=preview

안녕

사용자가 입력 필드에 항목을 작성하고 add 버튼

var listItems = this.props.names.map(function(d, idx){ 
     return (<r key={idx}></r>) 
    }) 

를 누를 때 내가 추가 할 행 component을 구현하고 있지만, 우리는 구성 요소

를 추가하려고 할 때 경고를 표시하지

const r = (props) => { 
    alert('---') 
    return (
     <li> 
      <span>hiii</span> 
     </li> 
    ); 
}; 

모든 업데이트 ??

Answer 1

문제는 JSX에 있습니다.

return (<r key={idx}></r>) 

소문자 태그는 내장 HTML로 간주됩니다. 사용자 정의 클래스 및 함수를 참조하려면 대문자 이름을 사용해야합니다. 따라서 React는 표준 HTML <r> 태그를 찾고 있습니다.

기능을 R으로 변경하면 모든 것이 작동합니다.

자세한 내용은 React docs을 참조하십시오.