在反应中递归地渲染元素内的元素答案

【问题标题】：Recursively render element inside element in react在反应中递归地渲染元素内的元素
【发布时间】：2020-02-24 02:08:47
【问题描述】：

这就是我的反应循环的样子：

{Object.entries(mmValue.message.users).map(
  ([userKey, userValue]) => (
     <div className={"item"}>
        <img src={userValue.picture} />
      </div>
  )
)}

预期的 HTML 是

<div class="container">
  <div class="item"><img src="https://qph.is.quoracdn.net/main-thumb-t-6967-200-rcsktwfqdpnhqloymmncxehvylehbalw.jpeg"/>
    <div class="item"><img src="http://i-cdn.phonearena.com/images/article/73429-image/Steve-Jobs-documentary-hits-theaters-and-video-on-demand-today.jpg"/>
      <div class="item"><img src="http://cdn.slashgear.com/wp-content/uploads/2014/10/Elon_Musk_LED_Lit_Wide-200x200.jpg"/></div>
    </div>
  </div>
</div>

问题是，我怎样才能在 React 中使用循环得到这个结果

这是codepen中的示例：

https://codepen.io/ehteshamkafeel/pen/OywvQM

【问题讨论】：

mmValue.message.users 长什么样子？
@YosefTukachinsky 用户照片数组。没有嵌套
mmValue.message.users.map( (img, index) => ( <div key={index} className={"item"}> <img src={img} /> </div> ))
@YosefTukachinsky 你确定它会生成这样的嵌套 div 吗？
哦，我明白了。给我一分钟，我会写一个答案

标签： javascript reactjs loops

【解决方案1】：

const imgs = [
    'img1.jpg',
    'img2.jpg',
    'img3.jpg'
];

const Items = ({i = 0}) => (<div className="item"><img src={imgs[i]}/>{i<imgs.length-1?(<Items i={i+1}/>):null}</div>);
return (
    <div className="container">
        <Items/>
    </div>
);

【讨论】：

【解决方案2】：

您可以使用 .map() 并且可以使用此函数为您拥有的每个图像创建一个单独的图像。检查下面的示例。

const images = [
    'https://qph.is.quoracdn.net/main-thumb-t-6967-200-rcsktwfqdpnhqloymmncxehvylehbalw.jpeg',
    'image src of another image',
    'image src of another image'
]

const imgList = () => {
  const renderList = images.map((img, i) => {
    return <div key={i}> <img src={imgs[i]}/> </div>;
  });
  return <div className="item">{renderList}</div>

【讨论】：