如何从使用 map() 创建的多个列表中更改单个列表中元素的顺序？

Question

{Sectors.map((item) => {
                        return(
                            <li>
                                <img src={item.image} alt={item.name} />

                                <p>
                                    <h5> {item.name} </h5> <br />
                                    <i classname="fa fa-check"></i>{item.value["one"]} <hr /> 
                                    <i classname="fa fa-check"></i>{item.value["two"]} <hr /> 
                                    <i classname="fa fa-check"></i>{item.value["three"]}
                                </p>
                            </li>
                        )
                    })}

我创建了一个包含图像和文本的 object。 使用 map() 后，它们显示为图像，然后显示为文本。 我想更改第二个列表中元素的顺序，即将元素的显示从图像然后文本更改为文本然后图像。 如果我们使用 map() function 是否有可能。 （我已经尝试过使用li:nth-position(2) 。 display-none对它有效，但flex-direction: row/column reverse不起作用。）

Answer 1

{Sectors.map((item) => {
                        return(
                            <li>
                                <img src={item.image} alt={item.name} />

                                <p>
                                    <h5> {item.name} </h5> <br />
                                    <i classname="fa fa-check"></i>{item.value["one"]} <hr /> 
                                    <i classname="fa fa-check"></i>{item.value["two"]} <hr /> 
                                    <i classname="fa fa-check"></i>{item.value["three"]}
                                </p>
                            </li>
                        )
                    })}

我创建了一个包含图像和文本的 object。 使用 map() 后，它们显示为图像，然后显示为文本。 我想更改第二个列表中元素的顺序，即将元素的显示从图像然后文本更改为文本然后图像。 如果我们使用 map() function 是否有可能。 （我已经尝试过使用li:nth-position(2) 。 display-none对它有效，但flex-direction: row/column reverse不起作用。）