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>

将列表呈现到ListItems和链接中

2 个答案: