javascript - 无法在 JSX 中嵌入 javascript

Question

我在这里有点生疏，请注意确定发生了什么。这是我的文件：

import React from 'react';
import './Navbar.css';
import {CONTENT_LINKS_PRESENTABLE, CONTENT_LINKS_SLUG} from '../../globals'
import {Link} from "react-router-dom";

function Navbar() {
  let jsx = (<div className="navbar">
      <div className="navbar-item">
        <Link to="/" id="navbar-brand">Daniel Pahor</Link>
      </div>
      <div id="navbar-items">
      
        {for (let content in CONTENT_LINKS_PRESENTABLE) {
          <div className="navbar-item">
            <Link to={CONTENT_LINKS_SLUG[content]} className="navbar-link">{CONTENT_LINKS_PRESENTABLE[content]}</Link>
          </div>
        }}
      
      </div>
    </div>)
    
  return jsx;
}

export default Navbar;

我收到以下错误：

Parsing error: unexpected token

在第 13 行（即当 for 循环开始时）

考虑到我已将 JS 代码嵌入到 {} 标记中，我不确定为什么会失败

标签： javascriptreactjsjsx

Answer 1

用 CONTENT_LINKS_PRESENTABLE.map(/* ... */) 替换 for ，这样它将返回节点数组。不过不要忘记钥匙！

{
CONTENT_LINKS_PRESENTABLE.map(content => (
          <div className="navbar-item" key={content}>
            <Link to={CONTENT_LINKS_SLUG[content]} className="navbar-link">
              {CONTENT_LINKS_PRESENTABLE[content]}
            </Link>
          </div>
        ))
}