Reactjs中的List元素

我在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);

import React，{Component}来自'React'；
从“材质ui/样式”导入{withStyles}；
常量样式={
根目录：{
显示：“flex”，
背景颜色：“白烟”，
宽度：“100%”，
},
}
功能列表（道具）{
常量{classes}=props；
常数列表=[1,2,3,4,5,6]；
const listItems=list.map（（项）=>{
{item}
});
返回(
{listItems}
)
}
导出默认样式（样式）（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扩展了React.Component{
render（）{
const{classes，animation}=this.props
返回(
)
}
}

---

我的列表应该出现在

MapAppBar.js

中。我把

导入列表放在“/List”中

in.

在map函数中不返回任何内容。在本例中，您将每个值映射到

未定义的

，因为您编写了一个块语句

试试看（不要用大括号，也不需要

（

和

）

）：

const listItems=list.map（（项）=>(
{item}
));

或（正确使用返回语句）

const listItems=list.map（（项）=>{
返回
{item}
});

这是因为花括号。 我认为马吕斯·舒尔茨（Marius Schulz）写了一个描述箭头函数如何工作的非常好的方法

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

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

const mapper=item=>（
{item}
）

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

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

const mapper=item=>{
返回
{item}
}

感谢您的解释和文章。它起作用了，我明白为什么。

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

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