Reactjs 上下文api-上下文数据中的循环

我有一个代码，每次使用上下文API从父组件向子组件传递一个名称 但我不知道如何循环从提供者获得的上下文，并在每次从提供者获得名称时重复使用

标记

我把线圈放在哪里了？以及如何将JSX用于多个

项目符号 我的代码是针对儿童（消费者）的

import React，{Component}来自'React'；
从“/Demo3_GrandChildComp”导入孙子组件3；
从“/AppContext”导入myContext；
类ChildComp_3扩展组件{
构造函数（）{
超级（）；
}
render（）{
返回(
{（上下文）=>(
儿童3组
名称：{'}

{context.name}

)}
);
}
}
导出默认子组件3；

这是提供者的代码

import React，{Component}来自'React'；
从“/Demo3\u ChildComp”导入ChildComp\u 3；
从“/AppContext”导入myContext；
类ParentsComp_3扩展组件{
构造函数（）{
超级（）；
this.state={name:[]，age:[]，name_arr:''，age_arr:''}；
}
getName=（e）=>{
this.setState（{name_arr:e.target.value}）；
};
getAge=（e）=>{
this.setState（{age\u arr:e.target.value}）；
};
点击=（）=>{
//名字
让Name=this.state.Name；
设N=this.state.name\u arr；
名称.推送（N）；
this.setState（{name:name}）；
//年龄
让Age=this.state.Age；
设A=this.state.age\u arr；
年龄.推（A）；
this.setState（{age:age}）；
};
render（）{
返回(
家长委员会第三委员会
姓名：


年龄：


);
}
}
导出默认的ParentsComp_3；

您需要映射名称数组以显示它们

...
<ul>
  {
     name.map(n => <li>Name: {n}</li>
  }
</ul>

。。。

{
name.map（n=>
名称：{n}
}

另一方面，由于您要将这些值传递给子组件，因此不需要使用上下文API。您可以像这里所做的那样直接将它们作为道具传递给子组件，但您没有在ChildComp_3中使用道具

<ChildComp_3 name={this.state.name} />

我需要使用上下文api，因为我需要将数据传递给grandechild，但您的回答非常有用，非常感谢！