将列表呈现到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 => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ListItem key={name.num}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link to="/glassmates/" + name.num > //Because your state not contains list==>names&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {name.n}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ListItem>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Divider /> // JSX should have on parent</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}

Answer 2

关于错误：对于第一个错误，您应该使用字符串插值，即：<Link to=`/glassmates/${name.num}` >其次，如上所述adjacent jsx elements must be wrapped in an enclosing tag。这意味着您可以/应该将元素包装在div中：<div> // parent&nbsp; ...&nbsp; <Divider /></div>