Reactjs 如何使用上下文API将迭代值从父组件传递给子组件

如何使用上下文API而不是传递道具，通过父组件将值传递给循环子组件

父组件

import React, { useState } from 'react'
import { ChildComponent } from './child-component'
import parentContext from './ParentContext'

export function ParentComponent(props) {
const [ parentState ] = useState([
  {
    "name": "Jonny",
    "age": "20"
  },
  {
    "name": "Raj",
    "age": "24"
  },
  {
    "name": "Rahul",
    "age": "21"
  },
  {
    "name": "Jenny",
    "age": "26"
  }
])
return (
<parentContext.Provider value={{parentState: parentState}}>
{parentState.map((obj, index) => 
<ChildComponent
        name={obj.name}  
        index={index}
        age={obj.age}
    />
)}
</parentContext.Provider>
)
}

import React, { useState, useContext } from 'react'
import parentContext from './ParentContext'

export function ChildComponent(props) {
const parentData = useContext(parentContext)
const [ childState, setChildState ] = useState(parentData)
return (
<div className='container'>
<span>Name: {childState.name}</span>
<span>Age: {childState.age}</span>
</div>
)
}

import React，{useState}来自“React”
从“./child component”导入{ChildComponent}
从“./parentContext”导入parentContext
导出函数ParentComponent（道具）{
常量[parentState]=使用状态([
{
“姓名”：“Jonny”，
“年龄”：“20”
},
{
“名称”：“Raj”，
“年龄”：“24”
},
{
“名称”：“Rahul”，
“年龄”：“21”
},
{
“姓名”：“珍妮”，
“年龄”：“26”
}
])
返回(
{parentState.map（（obj，index）=>
)}
)
}

子组件

import React, { useState } from 'react'
import { ChildComponent } from './child-component'
import parentContext from './ParentContext'

export function ParentComponent(props) {
const [ parentState ] = useState([
  {
    "name": "Jonny",
    "age": "20"
  },
  {
    "name": "Raj",
    "age": "24"
  },
  {
    "name": "Rahul",
    "age": "21"
  },
  {
    "name": "Jenny",
    "age": "26"
  }
])
return (
<parentContext.Provider value={{parentState: parentState}}>
{parentState.map((obj, index) => 
<ChildComponent
        name={obj.name}  
        index={index}
        age={obj.age}
    />
)}
</parentContext.Provider>
)
}

import React, { useState, useContext } from 'react'
import parentContext from './ParentContext'

export function ChildComponent(props) {
const parentData = useContext(parentContext)
const [ childState, setChildState ] = useState(parentData)
return (
<div className='container'>
<span>Name: {childState.name}</span>
<span>Age: {childState.age}</span>
</div>
)
}

import React，{useState，useContext}来自“React”
从“./parentContext”导入parentContext
导出功能子组件（道具）{
const parentData=useContext（parentContext）
常量[childState，setChildState]=useState（parentData）
返回(
名称：{childState.Name}
年龄：{childState.Age}
)
}

---

我想从父组件传递值并将其发送到子组件，然后在子组件中显示值。有人能帮我吗。

实际上，您不需要为上述目的使用

上下文

，只需将您的组件更改为：

Parent

import React, { useState } from "react";
import { ChildComponent } from "./child-component";

export function ParentComponent(props) {
  const [parentState] = useState([
    {
      name: "Jonny",
      age: "20",
    },
    {
      name: "Raj",
      age: "24",
    },
    {
      name: "Rahul",
      age: "21",
    },
    {
      name: "Jenny",
      age: "26",
    },
  ]);

  return (
    <>
      {parentState.map((obj, index) => (
        <ChildComponent
          key={index}
          name={obj.name}
          index={index}
          age={obj.age}
        />
      ))}
    </>
  );
}

如果

parentState

不改变，最好使用一个正常变量，如下所示：

const parentState = [
    {
      name: "Jonny",
      age: "20",
    },
    {
      name: "Raj",
      age: "24",
    },
    {
      name: "Rahul",
      age: "21",
    },
    {
      name: "Jenny",
      age: "26",
    },
  ]

---

在这种情况下，您确实不需要

上下文。你已经拥有的一切都很好。将道具从父级传递给直接子级并没有错。同样，在子组件中，您不需要将上下文的值存储在状态中。请注意，
childState
或
parentData
将是一个数组。因此，
parentData[0]
etc将是每个元素。