reduxを使って反応でリストを作成するには？

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