循环遍历数组并返回 jsx - 反应答案

【问题标题】：loop through array and return jsx - react循环遍历数组并返回 jsx - 反应
【发布时间】：2021-03-25 23:47:58
【问题描述】：

我正在尝试通过数组进行映射并返回 jsx，但是我使用的是 Typescript，所以 .map 只返回函数（而不是 jsx）。 如何循环遍历数组并为 React 中的每个数组元素返回一些 jsx？

我已经有了 return (<div>{array.map(this.function)}</div>) 所以我在每个数组元素上返回一个函数，但我想同时返回 jsx 和 map 中的一个函数。我试过这个{array.map(() => {return this.function && <p>text</p>})}，但它只是返回 jsx 或函数。

我想要实现的目标：当我映射数组时，我想在每个数组元素上运行一个函数，并在每个元素上返回一个段落<p></p>，以便我可以在输出旁边显示一些文本函数。

任何帮助将不胜感激！

【问题讨论】：

map 返回回调函数返回的任何内容，所以如果 map 返回一个函数，那么您调用它是错误的，也许尝试调用回调两次？ array.map((...args) => this.function(...args)())
你能澄清I would like to display some jsx next to the rendered function的意思吗
你能显示this.function的返回吗？确保您正确使用 HOC 以获得使用它的功能也很重要。
啊，是的，我明白了，谢谢，我返回了一些 jsx，但我需要返回 jsx 和一个函数。是否可以同时返回 jsx 和 .map 的函数？我尝试使用&&，但它返回的是 jsx 还是函数？ @KrzysztofKrzeszewski
我觉得这可能是 XY problem 的一个案例，您能否向我们提供更多关于您想要实现的目标的详细信息，而不是您如何尝试实现它？

标签： javascript arrays reactjs for-loop

【解决方案1】：

不要忘记添加正确的密钥：

{array.map((el) => (
    <React.Fragment key={}>
        {this.function(el)}
        <p>text</p>
    </React.Fragment>
 ))}

【讨论】：

哇，谢谢！问题是我实际上并没有调用该函数，我添加了 () 并且它起作用了。 @HaJa