列出未在 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

您没有 return 从 map 函数中获取任何内容，因此它不会在无序列表中呈现任何内容。在你的 arrow function 中，你会：

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

这没有 return 任何东西。 Array.prototype.map 需要一个 return 值的回调来执行任何操作。 map 将元素转换为数组，mapping（执行）每个元素的回调。 return 值是 returned 和映射数组中相应位置的值。

您必须 return map 函数中的列表元素，如下所示：

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

现在，列表元素的映射数组已呈现，因为列表元素是 returned。

为了缩短它，您可以将其写成 (params) => value 的形式，它等同于上面的形式，其中 value 是 returned 值，如下所示：

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

列出未在 React 中呈现的元素

List elements not rendering in React

javascript

reactjs

react-jsx