redux를 사용하여 react에서 목록을 만드는 방법은 무엇입니까?

Question

나는 redux를 사용하여 목록을 만들려고합니다. 반응은 구성 요소에서 작동합니다. 그래서 목록을 별도의 구성 요소로 만들고 싶습니다.

사용자가 입력 필드를 채우고 add 버튼을 누르면 목록 항목이 추가됩니다. 그러나 현재는 목록 항목을 표시하지 않습니다.

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

나는 현재 이런 식으로 일을하고있다 :

여기 내 코드입니다

<r names ={this.props.names}/> 


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

this.props.names 그것을 렌더링 기능을 해고해야 변경합니다. 그러나 render 함수를 호출하지 않습니다.

Answer 1

구성 요소는 대문자 여야합니다. r은 R이어야합니다.

업데이트 plnkr : https://plnkr.co/edit/ENpx2s7JdW0AZUYtzKOj?p=preview

이것은 취급에게 응용 프로그램 레벨 요소로 브라우저 기본 요소 (DIV, P, 범위 등)와 자본 요소로 소문자 요소에 반응하기 때문이다.

Answer 2

반응 구성 요소는 UpperCase 자로 시작해야합니다. 그 변경하고 그것은 당신의 문제를 해결할 것입니다

render() { 
    const data =[{"name":"test1"},{"name":"test2"}]; 
    var listItems = this.props.names.map(function(d, idx){ 
     return (<R key={idx}></R>) 
    }) 
    return (
     <div> 
     <input type="text" onChange ={this.changeEv}/> 
     <button onClick={this.addName}>add</button> 
     {listItems} 
     </div> 
    ); 
    } 
} 
const R = (props) => { 
    alert('---') 
    return (
     <li> 
      <span>hiii</span> 
     </li> 
    ); 
}; 

Plunkr