我有一个包含对象的数组。我正在创建此数组的映射以使用 span 组件呈现名称。

let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}];

我一直在使用以下两种不同的功能来迭代该对象数组，并使用 map 来呈现 JSX 元素。

功能1:

import React, { Component } from 'react';
class App extends Component {

  render() {
    let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}];
    const items = data.map((key, i) => {
      return <span key={key.id}>{key.name}</span>;
    });
    return (
      <div>
        {items}
      </div>
    );
  }
}

export default App;

功能2:

import React, { Component } from 'react';
class App extends Component {

  render() {
    let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}];
    let rows = [];
    data.map((key, i) => {
      rows.push(<span key={key.id}>{key.name}</span>);
    });
    return (
      <div>
        {rows}
      </div>
    );
  }
}


export default App;

我知道以上两种使用 map 和渲染 JSX 元素的不同方式。除了这两种之外，还有其他方法可以做同样的事情吗？如果可以，推荐哪个？

最佳答案

大多数情况下，我遵循这个规则:

创建一个渲染项目的组件

// in some file
export const RenderItems = ({data}) => {
  return data && data.map((d, i) => <span key={d.id}>{d.name}</span>) || null
}

Hook RenderItems

import { RenderItems } from 'some-file'

class App extends Component {
  render() {
    // you may also define data here instead of getting data from props
    const { data } = this.props
    return (
      <div>
        <RenderItems data={data} />
      </div>
    )
  }
}

附加组件中的数据

const data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}]
<App data={data} />

即使使用您的第二个代码示例，遵循此规则也不会影响性能。将项目推送到数组中并渲染项目。因为，您不是直接在渲染 Hook 内部工作。始终注意渲染钩子(Hook)不会直接在其中实现任何逻辑。

此外，我不会创建 id仅用于使用 key :

const data = [{"name": "Hi"}, {"name": "Hello"}]
//... and when using index as key
.map((d, i) => <span key={'item-'+i}>
// or,
.map((d, i) => <span key={'item-'+i+'-'+d.name}>

参见 this post为什么我在使用索引作为键时遵循这种语法。

更新:

如果你想避免使用不必要的html标签，你可以使用React.Fragment

export const RenderItems = ({data}) => {
  return data && 
    data.map(
      (d, i) => <React.Fragment key={d.id}>{d.name}</React.Fragment>
    ) || null
}
// and when rendering, you just return the component
return <RenderItems data={data} />

注意:

1. 您可以使用 <></>作为 <React.Fragment></React.Fragment> 的别名仅当您没有任何其他属性(property)时。由于我们在其上使用 key 属性，因此未使用它。
2. 看看this支持 React.Fragment 的缩写符号.

示例使用 <></> :

<>{d.name}</>

这将呈现 d.name没有任何标记的 html 中的值。当我们专门将现有设计转换为 React 应用程序时，这被认为是最好的。或者，可能还有其他情况。比如，我们将显示一个定义列表:

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
  <dt></dd>
</dl>

而且我们不想附加不必要的html标签，那么使用Fragment会让我们的生活更轻松:

例子:

<>
  <dt>{d.term}</dt>
  <dd>{d.definition}</dd>
</>

最重要的情况是渲染 td tr 中的元素(一个 TR 组件)。如果我们不这样做，那么我们就违反了 HTML 的规则。该组件将无法正确呈现。在 react 中，它会抛出一个错误。

更新2:

此外，如果您有 long list of props如下所示:

const {
  items,
  id,
  imdbID,
  title,
  poster,
  getMovieInfo,
  addToFavorites,
  isOpen,
  toggleModal,
  closeModal,
  modalData,
} = props

你可以考虑像这样解构:

const { items, ...other } = props
// and in your component you can use like:
<div modalData={other.modalData}>

但是，我个人更喜欢使用第一个示例代码。这是因为在开发过程中，我不需要每次都回头查看其他组件或查找控制台。在给定的示例中，有类似 modalData={} 的键所以我们很容易维护modalData={other.modalData} .但是，如果需要像 <div>{modalData}</div> 这样的代码怎么办？ ？那么，你也可以同意我的偏好。

关于javascript - 在 React 中迭代数据数组时呈现 JSX 元素的最有效方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52176673/