将列表呈现到ListItems和链接中

Question

class Glass extends React.Component {       constructor(props) {       super(props);       this.state = {         names: [{n: "Gemma", num: "01"}, {n: "Katie", num: "02"}],       }      }     render() {        const { list } = this.state;        return (          <div>            <List component="hello">              {list.map(name => {                return (                  <ListItem key={name.num}>                    <Link to="/glassmates/" + name.num > //I keep getting error here saying unexpected token.                      {name.n}                    </Link>                  </ListItem>                  <Divider /> // also getting errror here saying adjacent jsx elements must be wrapped in an enclosing tag                )              })}            </List>          </div>        );      }    }我列出了我在代码中遇到的一些错误，但是对于是否将列表呈现到ListItem和List组件内的Links中，我普遍感到困惑。

Answer 1

{list.map(name => {

                return (

<div>

                  <ListItem key={name.num}>

                    <Link to="/glassmates/" + name.num > //Because your state not contains list==>names

                      {name.n}

                    </Link>

                  </ListItem>

                  <Divider /> // JSX should have on parent

</div>

                )

              })}

Answer 2

关于错误：对于第一个错误，您应该使用字符串插值，即：

<Link to=`/glassmates/${name.num}` >

其次，如上所述adjacent jsx elements must be wrapped in an enclosing tag。这意味着您可以/应该将元素包装在div中：

<div> // parent

  ...

  <Divider />

</div>