在 React 中用一些自定义 jsx 替换数组中的项目的最佳方法是什么答案

【问题标题】：What is the best way to replace an item from an array with some custom jsx in React在 React 中用一些自定义 jsx 替换数组中的项目的最佳方法是什么
【发布时间】：2023-01-19 23:43:42
【问题描述】：

在我的 React 组件中，我收到一个 array 对象（6 个项目）。我必须用一些自定义 jsx 替换第 6 个项目。

实现这一目标的最佳方法是什么？

【问题讨论】：

标签： reactjs arrays object

【解决方案1】：

在 React 组件中有几种不同的方法可以实现这一点，但一种常见的方法是使用 JavaScript map() 函数来创建一个包含修改后的项目的新数组。

下面是一个示例，说明如何使用 map() 将数组中的第 6 项替换为自定义 JSX：

    const myArray = [{item1}, {item2}, {item3}, {item4}, {item5}, {item6}];

const modifiedArray = myArray.map((item, index) => {
    if (index === 5) {
        return <CustomJSX />
    }
    return item;
});

在此示例中，map() 函数遍历原始数组中的每个项目，并针对每个项目检查其索引。如果索引为 5（第 6 项），则返回自定义 JSX。如果不是，它返回原始项目。 map() 函数使用修改后的项目创建一个新数组，您可以使用这个新数组来呈现您的组件。

【讨论】：

【解决方案2】：

数组[array.length-1] = <div>Hello</div>

如果你想要更好的东西，你必须给我更多的工作。

【讨论】：