时间戳

首页 > 解决方案 > Reactjs 中的列表元素

reactjs - Reactjs 中的列表元素

问题描述

我在 React 中创建了一个列表元素，但我不明白为什么它没有出现。我必须做一个类组件吗？

List.js

import React, { Component } from 'react';
import { withStyles } from 'material-ui/styles';


const styles = {
  root: {
      display: 'flex',
      backgroundColor: "whitesmoke",
      width: '100%',
  },
}

function ListSeances(props) {

    const { classes } = props;

    const list = [1,2,3,4,5,6];

    const listItems = list.map((item) =>{
        <li>{ item }</li>
    });


      return (
         <div className={classes.root}>
           <ul>{ listItems }</ul>
         </div>
      )
  }

export default withStyles (styles)(ListSeances);

MapAppBar

class MapAppBar extends React.Component {

  render() {

    const { classes, animation } = this.props

    return(
  <div className={classes.root}>
    <App_Bar className={classes.appBar} position="fixed">
      <Toolbar>
        <Typography variant="title" color="inherit">
        </Typography>
      </Toolbar>
      <TextFields/>
        <DatePicker/>
        <DatePicker2/>
      <ListSeances/>
    </App_Bar>
  </div>
  )
  }
}

我的列表应该出现在MapAppBar.js. 我放进去import ListSeances from './List';了。

标签： reactjslistcomponentselement

解决方案

您不会在 map 函数中返回任何内容。在您的情况下，您将每个值映射到undefined，因为您编写了一个块语句。

尝试（没有花括号，(and)也不是必需的）：

const listItems = list.map((item) => (
    <li>{ item }</li>
));

或（正确地带有 return 语句）

const listItems = list.map((item) => {
    return <li>{ item }</li>
});

这是因为花括号。我认为描述箭头函数如何工作的一种非常好的方式是由 Marius Schulz 编写的。

https://blog.mariusschulz.com/2015/06/09/returning-object-literals-from-arrow-functions-in-javascript

在您的情况下，可以编写使用箭头函数时的映射函数

const mapper = item => (<li>{ item }</li>)

或者，如果您不返回对象文字

const mapper = item => {
    return <li>{ item }</li>
}

推荐阅读