列出未在React中呈现的元素

Question

这是我的补充工具栏组件.

const Sidebar = React.createClass({
  render(){
    let props = this.props;
    return(
      <div className= 'row'>
      <h2>All Rooms</h2>
        <ul>
          {props.rooms.map((room, i) => {
            <li key={i}> {room.name} </li>
          })}
        </ul>
        {props.addingRoom && <input ref='add' />}
      </div>

    );
  }
})

这是我渲染它填充一个房间的地方.

ReactDOM.render(<App>
  <Sidebar rooms={[ { name: 'First Room'} ]} addingRoom={true} />
  </App>, document.getElementById('root'));

<ul></ul>标签内的内容根本不呈现.知道我可能缺少什么.

Answer 1

您没有从map函数返回任何内容,因此它在无序列表中不呈现任何内容.在您的箭头功能中,您可以:

(room, i) => {
    //statements
}

这不会返回任何东西.Array.prototype.map需要一个返回值的回调来做任何事情.map将元素转换为数组,映射(执行)每个元素的回调.返回值是返回和映射数组中相应位置的值.

您必须返回map函数中的list元素,如下所示:

<ul>
    {props.rooms.map((room, i) => {
      return <li key={i}> {room.name} </li>;
    })}
</ul>

现在,呈现列表元素的映射数组,因为返回了list元素.

为了缩短它,您可以用(params) => value与上面相同的形式编写它,value返回值在哪里,如下所示:

{props.room.map((room, i) => <li key={i}> {room.name} </li>)}