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

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

以下是我目前的代码：

sidebarcomponents.js：

从“React”导入React
函数边栏组件（{name，title，selected，onSelect}）{
常量样式={
光标：“指针”
}
返回(
{
如果（onSelect）onSelect（name）
}}
>
             
)
}
导出默认边栏组件

sidebar.js：

从“React”导入React，{useffect，useState}
从“../../components/Sidebar1/Sidebar”导入SidebarComponents
函数侧栏（{onChange}）{
常量[selectedComponent，setSelectedComponent]=useState({
组件名称：[
{name:'Overview'，title:'Overview'}，
{名称：'SPO2'，标题：'SPO2'}
    ]
  })
返回(
    
{selectedComponent.componentsName.map（componentsName=>{
返回(
          
        )
      })}
    
  )
}
导出默认边栏

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

---

我希望我的问题很清楚。

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

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

    const style={
        cursor: "pointer"
    };

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

}

函数边栏组件（{name，title，selected，onSelect}）{
常量样式={
光标：“指针”
};
返回(
{if（onSelect）onSelect（name）}
>
{name}
)
}

---

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

您需要在组件内的DIV中渲染名称，而不是将其作为道具传递给DIV-like

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

    const style={
        cursor: "pointer"
    };

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

}

函数边栏组件（{name，title，selected，onSelect}）{
常量样式={
光标：“指针”
};
返回(
{if（onSelect）onSelect（name）}
>
{name}
)
}

---

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

@shubham khatri的答案是正确的：您需要将文本包含在组件中

下面是一个使用和的更深入的解决方案——我建议阅读链接文档，因为挂钩和渲染道具非常棒。。请注意，挂钩仅从React 16.8开始提供

简单来说，在下面的示例中，侧栏使用父组件提供的

render

道具进行渲染：

App

。在

SidebarComponent

的

render

属性中，函数表示呈现

标题

和

名称

组件。

map

函数中的

name

用作

onClick

处理程序的参数，并将

selected

设置为

true

或

false

，而无需将所选组件对象传递到侧栏

如果您想提供侧边栏可以渲染的组件的主列表，然后在道具中传递该集合中应渲染的组件，那么您必须过滤

组件名称

数组，以便只有在道具中为

侧边栏组件

提供的组件

import React from 'react'
import ReactDOM from 'react-dom'

/**
 * Title component
 * @param {string=''} props.title
 */
const Title = ({ title = '' }) => <h2>{title}</h2>

/**
 * Name component
 * @param {string=''} props.name
 */
const Name = ({ name = '' }) => <div>{name}</div>

/**
 * SidebarComponent styles
 */
const style = {
  cursor: 'pointer'
}

/**
 * SidebarComponent classes
 */
const classes = {
  selected: {
    backgroundColor: '#00ff00'
  }
}

/**
 * @func SidebarComponent
 * @param {string=''} name
 * @param {function} onClick
 * @param {boolean=false} selected
 * @param {string=''} title
 * @returns {React.Node} react component that returns a div
 *  containing two other components: Title and Name
 */
const SidebarComponent = ({
  name = '',
  onClick,
  selected = false,
  title = ''
}) => (
  <div
    onClick={onClick && onClick}
    style={{
      ...style,
      ...(selected ? classes.selected : {})
    }}
  >
    <Title title={title} />
    <Name name={name} />
  </div>
)

/**
 * @func Sidebar
 * @param {Array[{title: string, name: string}]} componentsName an
 *  arry of components to render inside the sidebar, as SidebarComponents
 * @param {function} renderProp render function that dictates
 *  what to render inside of the sidebar
 * @returns {Node} returns the calling of the renderProp function
 */
const Sidebar = ({ componentsName, render }) => {
  const [selectedComponentName, setSelectedComponentName] = React.useState(null)
  const handleClick = name => setSelectedComponentName(name)
  return (
    <div id="sidebar">
      {render({
        selectedComponentName,
        handleClick
      })}
    </div>
  )
}

/**
 * An array of the components to render inside the Sidebar
 */
const componentsName = [
  { name: 'Overview', title: 'Overview' },
  { name: 'SPO2', title: 'SPO2' }
]

/**
 * @func App
 * @returns {React.Node} a react component that renders the sidebar
 */
const App = () => (
  <Sidebar
    render={({ selectedComponentName, handleClick }) =>
      componentsName.map(({ name, ...props }, index) => (
        <SidebarComponent
          selected={name === selectedComponentName}
          key={`sidebar-component-${index}`}
          onClick={() => handleClick(name)}
          {...{
            name,
            ...props
          }}
        />
      ))
    }
  />
)

ReactDOM.render(<App />, document.getElementById('container'))

从“React”导入React
从“react dom”导入react dom
/**
*标题部分
*@param{string=''}props.title
*/
常量Title=（{Title='''}）=>{Title}
/**
*名称组件
*@param{string=''}props.name
*/
常量名称=（{Name=''}）=>{Name}
/**
*侧边栏组件样式
*/
常量样式={
光标：“指针”
}
/**
*边栏组件类
*/
常量类={
选定：{
背景颜色：“#00ff00”
}
}
/**
*@func侧边栏组件
*@param{string=''}名称
*@param{function}onClick
*@param{boolean=false}已选中
*@param{string=''}title
*@returns{React.Node}返回div的React组件
*包含两个其他组件：标题和名称
*/
常量边栏组件=({
名称=“”，
onClick，
所选=假，
标题=“”
}) => (
)
/**
*@func侧边栏
*@param{Array[{title:string，name:string}]}组件名称
*要在侧边栏内渲染的组件的排列，如侧边栏组件
*@param{function}renderProp指定
*在侧边栏内部渲染什么
*@returns{Node}返回对renderProp函数的调用
*/
常量边栏=（{componentsName，render}）=>{
常量[selectedComponentName，setSelectedComponentName]=React.useState（null）
const handleClick=name=>setSelectedComponentName（名称）
返回(
{渲染({
选择的组件名称，
手舔
})}
)
}
/**
*要在侧边栏内渲染的组件数组
*/
常量组件名称=[
{name:'Overview'，title:'Overview'}，
{名称：'SPO2'，标题：'SPO2'}
]
/**
*@func应用程序
*@returns{React.Node}呈现侧边栏的React组件
*/
常量应用=（）=>(
componentsName.map（（{name，…props}，index）=>(
handleClick（名称）}
{...{
名称
…道具
}}
/>
))
}
/>
)
ReactDOM.render(

在本演示中，您可以单击任一菜单项，并看到所选项将背景颜色更改为绿色。
@shubham khatri的答案是正确的：您需要将文本包含在组件中

下面是一个更深入的解决方案，使用and——我建议将链接文档作为挂钩和渲染道具来阅读，这非常棒。请注意，挂钩仅从React 16.8开始提供

简单来说，在下面的示例中，侧栏使用
render
prop-pro进行渲染
import React from 'react'
import ReactDOM from 'react-dom'

/**
 * Title component
 * @param {string=''} props.title
 */
const Title = ({ title = '' }) => <h2>{title}</h2>

/**
 * Name component
 * @param {string=''} props.name
 */
const Name = ({ name = '' }) => <div>{name}</div>

/**
 * SidebarComponent styles
 */
const style = {
  cursor: 'pointer'
}

/**
 * SidebarComponent classes
 */
const classes = {
  selected: {
    backgroundColor: '#00ff00'
  }
}

/**
 * @func SidebarComponent
 * @param {string=''} name
 * @param {function} onClick
 * @param {boolean=false} selected
 * @param {string=''} title
 * @returns {React.Node} react component that returns a div
 *  containing two other components: Title and Name
 */
const SidebarComponent = ({
  name = '',
  onClick,
  selected = false,
  title = ''
}) => (
  <div
    onClick={onClick && onClick}
    style={{
      ...style,
      ...(selected ? classes.selected : {})
    }}
  >
    <Title title={title} />
    <Name name={name} />
  </div>
)

/**
 * @func Sidebar
 * @param {Array[{title: string, name: string}]} componentsName an
 *  arry of components to render inside the sidebar, as SidebarComponents
 * @param {function} renderProp render function that dictates
 *  what to render inside of the sidebar
 * @returns {Node} returns the calling of the renderProp function
 */
const Sidebar = ({ componentsName, render }) => {
  const [selectedComponentName, setSelectedComponentName] = React.useState(null)
  const handleClick = name => setSelectedComponentName(name)
  return (
    <div id="sidebar">
      {render({
        selectedComponentName,
        handleClick
      })}
    </div>
  )
}

/**
 * An array of the components to render inside the Sidebar
 */
const componentsName = [
  { name: 'Overview', title: 'Overview' },
  { name: 'SPO2', title: 'SPO2' }
]

/**
 * @func App
 * @returns {React.Node} a react component that renders the sidebar
 */
const App = () => (
  <Sidebar
    render={({ selectedComponentName, handleClick }) =>
      componentsName.map(({ name, ...props }, index) => (
        <SidebarComponent
          selected={name === selectedComponentName}
          key={`sidebar-component-${index}`}
          onClick={() => handleClick(name)}
          {...{
            name,
            ...props
          }}
        />
      ))
    }
  />
)

ReactDOM.render(<App />, document.getElementById('container'))