时间戳

首页 > 解决方案 > 将元素列表推送到 React 中的组件

reactjs - 将元素列表推送到 React 中的组件

问题描述

我想构建一个类似于此图像中的侧边栏组件：我不想通过道具将子组件作为具有文本值的对象传递，而是为每个元素中的每个键值对创建一个单独的组件列表。例如：如果列表有 3 个元素，则列表中的每个元素应该有 3 个组件。

到目前为止，这是我的代码：

侧边栏组件.js：

import React from 'react'

function SidebarComponents({ name, title, selected, onSelect }) {
  const style = {
    cursor: 'pointer'
  }

  return (
    <div
      name={name}
      title={title}
      style={style}
      onClick={() => {
        if (onSelect) onSelect(name)
      }}
    >
                   
    </div>
  )
}

export default SidebarComponents

侧边栏.js：


import React, { useEffect, useState } from 'react'
import SidebarComponents from '../../components/Sidebar1/Sidebar'

function Sidebar({ onChange }) {
  const [selectedComponent, setSelectedComponent] = useState({
    componentsName: [
      { name: 'Overview', title: 'Overview' },
      { name: 'SPO2', title: 'SPO2' }
    ]
  })

  return (
    <div>
      {selectedComponent.componentsName.map(componentsName => {
        return (
          <SidebarComponents
            name={componentsName.name}
            title={componentsName.title}
          />
        )
      })}
    </div>
  )
}

export default Sidebar

如何更改我的代码以映射列表子组件而不是代表它们的对象列表？

我希望我的问题很清楚。

标签： reactjscomponents

解决方案

您需要在组件内部的 DIV 中呈现名称，而不是将其作为道具传递给 div

function SidebarComponents({name,title,selected,onSelect}) {

    const style={
        cursor: "pointer"
    };

    return (
        <div 
            title = {title}
            style={style}
            onClick={() => {if (onSelect) onSelect(name)}}
        >
           {name}
        </div>
    )

}

在映射后渲染它时，还将 onSelect 和 selected 道具传递给 SidebarComponents

推荐阅读