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函数返回任何内容，因此它在无序列表中不呈现任何内容。在您的arrow function中，您可以：

(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>)}

列出未在React中呈现的元素

1 个答案: