我正在学习React并遇到渲染多个元素的问题。

问题是我正在从Firebase检索一个数组,该数组需要为数组中的每个项目返回一个新的div和svg。我知道React只会渲染1个元素,所以我需要将内容放入包装器中,这已经完成了。我还创建了一个使用.map()遍历数组并为我创建这些元素的变量。

我不明白,为什么它不为数组中的每个项目返回新的div和svg?相反,它仅创建1 div和svg?该数组包含文件夹名称列表。

任何帮助,将不胜感激。

class SidebarPrivateFolders extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {

    let list = this.props.data.map((currentObj) => {
      return (
        <div>
          <svg className="sidebar-icon">
            <use xlinkHref={currentObj.xlinkHref}></use>
          </svg>
          <div className="public-folders">{currentObj.name}</div>
        </div>
      );
    });

    return (
      <div className="sidebar-section">
        <div className="sidebar-section-wrapper">
          {list}
        </div>
      </div>
    );
  }
}


Console.log(this.props.data)返回以下屏幕截图。

javascript - 在React Component中使用.map从数据库数组中导出多个元素?-LMLPHP

最佳答案

在您的输出中。currentObj.name是一个array ..因此,如果要为name数组中的每个元素创建div,也必须对其进行循环。

您可以执行以下操作:

class SidebarPrivateFolders extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {

    let list = this.props.data.map((currentObj) => {
return currentObj.name[0].map((innerArray,i) => {
      return (
        <div key={i}>
          <svg className="sidebar-icon">
            <use xlinkHref={currentObj.xlinkHref}></use>
          </svg>
          <div className="public-folders">{currentObj.innerArray[i]}</div>
        </div>
      );
    });
    });

    return (
      <div className="sidebar-section">
        <div className="sidebar-section-wrapper">
          {list}
        </div>
      </div>
    );
   }


P.S这是未经测试的解决方案。您可能会遇到语法错误

10-05 20:49
查看更多