在React中循环遍历简单的对象数组

Question

我不使用JSX，这是一个问题吗？这被认为是一种不好的实践吗？

var links = [
  { endpoint: '/america' },
  { endpoint: '/canada' },
  { endpoint: '/norway' },
  { endpoint: '/bahamas' }
];

class Navigation extends React.Component {
  render() {
    return (
      <div className="navigation">
        <ul>
          const listItems = links.map((link) =>
            <li key={link.endpoint}>{link.endpoint}</li> 
          );
        </ul>
      </div>
    );
}

根据React文档中的基本列表组件部分，看起来我应该能够打印数组的内容，就像我在<ul></ul>标签内所做的那样。

https://facebook.github.io/react/docs/lists-and-keys.html#basic-list-component

问题是我在使用一个对象数组吗？文档中使用的是简单数组。我希望得到正确的指引。

- bruh

---

const listItems 应该被包裹在 {} 中吗？另外，您能解释一下 我没有使用JSX 吗？ - Rajesh

返回 ( <div className="navigation"> <ul> links.map((link) => <li key={link.endpoint}>{link.endpoint}</li> ); </ul> </div> ); 是使用 JSX，你不能在其中有 const。 - Shubham Khatri

可能是在ReactJs中呈现数组的重复问题。 - Shubham Khatri

抱歉造成困惑 - 我原以为要使用JSX，需要将文件保存为.jsx，这样才能访问不同的功能。此外，我注意到在“我的理解”中，JSX组件的声明方式不同，并且由逗号分隔。但我可能对此有所误解。 - bruh

Answer 1

问题在于你的语法无效，你应该有像这样的东西:

var links = [
  { endpoint: '/america' },
  { endpoint: '/canada' },
  { endpoint: '/norway' },
  { endpoint: '/bahamas' }
];

class Navigation extends React.Component {
  render() {
    const listItems = links.map((link) =>
        <li key={link.endpoint}>{link.endpoint}</li> 
    );
    return (
      <div className="navigation">
        <ul>
          {listItems}
        </ul>
      </div>
    );
}

- Daniel Andrei

---

太棒了！谢谢。有没有办法在这里使用旧的 forEach？ - Volatil3

@Volatil3 是的，我认为你可以那样做，但我发现 Array.prototype.map 更容易使用：`const listItems = links.map(link =>

{link.endpoint}

);` - Daniel Andrei

Answer 2

你应该能够做到这样：

    class Navigation extends React.Component {
      render() {
        return (
          <div className="navigation">
            <ul>
              {
                links.map(link =>
                  <li key={link.endpoint}>{link.endpoint}</li> 
                )
              }
            </ul>
          </div>
        );
    }

- Nocebo

---

这也起作用了，只是需要在关闭 map(); 括号后删除分号。谢谢。 - bruh