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

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

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

Functionality1：

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;

Functionality2：

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
}

钩住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} />

即使使用第二个代码示例,遵循此规则也不会影响性能.推送数组中的项目并呈现项目.因为,你不是直接在渲染钩子里工作.始终注意渲染钩子不会直接在其中实现任何逻辑.

此外,我不会为使用密钥创建id：

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为什么我在使用index作为键时遵循此语法.

更新：

如果要避免使用不必要的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} />

注意：

>您可以使用<>< />作为< React.Fragment>< /React.Fragment\u0026gt;的别名;只有你没有任何额外的财产.因为我们正在使用它的关键属性,而不是使用它.
>看看this以支持React.Fragment的简短表示法.

使用<>< />的示例：

<>{d.name}</>

这将在html中呈现d.name的值,不带任何标记.当我们专门改造现有设计以应对应用时,这被认为是最好的.或者,可能还有其他情况.就像,我们将显示一个定义列表：

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

我们不想附加不必要的html标签,然后使用Fragment将使我们的生活更轻松：

例：

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

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

UPDATE2：

另外,如果您有以下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>？那么,您也可能同意我的偏好.