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更改时，它应该触发渲染功能。但它没有调用渲染函数。

Answer 1

React Component必须以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

Answer 2

您的组件应该是资本。 r应该是R。

更新了plnkr： https://plnkr.co/edit/ENpx2s7JdW0AZUYtzKOj?p=preview

这是因为React将小写元素视为浏览器本机元素（div，p，span等），将大写元素视为app级元素。

如何使用redux创建响应列表？

2 个答案: