部分功能组件无法在React中呈现，即使相同的代码也适用于另一个组件

Question

我在一个React网站上工作。我使用一个函数组件通过映射数组来呈现一段代码。这是代码

import React from 'react'
import './DedicatedServer.css'

function DedicatedServer() {
    const features = [
        {
            id: 1,
            title: "Performance",
            text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
        },
        {
            id: 2,
            title: "Secure",
            text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
        },
        {
            id: 3,
            title: "Speed",
            text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
        },
        {
            id: 4,
            title: "Price",
            text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
        },
        {
            id: 5,
            title: "Uptime",
            text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
        },
        {
            id: 6,
            title: "Live Support",
            text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
        },
    ]
    return (
        <div className="dedicated-server-container">
            <div>
                <h2 className="dedicated-server-heading">100GBPS for your needs</h2>
                <p className="dedicated-server-text">100GBPS provides you with unrivalled performance, support, and reliability</p>
                <p className="dedicated-server-text">Everything you can think of when you want to buy a dedicated server</p>
                <div className="dedicated-features">
                    {features.map((feature, i) => {
                        <div key={i} className="dedicated-feature">
                            <h3 className="feature-heading">{feature.title}</h3>
                            <p className="feature-text">{feature.text}</p>
                        </div>
                    })}
                    <h1>Hello there!</h1>
                </div>
            </div>
        </div>
    )
}

export default DedicatedServer

其他一切都按预期运行，但大括号内的块不会呈现。我检查了控制台，也没有错误。

我在Stack overflow上查看了一些与渲染问题相关的答案，但我遵循了所有内容，我不太确定我遗漏了什么。

我在另一个文件中使用了相同的方法，它工作得很好。我知道这是一个非常简单的问题，我在这里漏掉了一些非常愚蠢的东西，但是你能指出这里的问题是什么吗？

这是另一个文件的代码片段，它工作得很好。

import React from 'react'
import cloudlinux from './vector-logo/cloudlinux.svg'
import litespeed from './vector-logo/litespeed.svg'
import letsencrypt from './vector-logo/lets-encrypt.svg'
import cloudflare from './vector-logo/cloudflare.svg'
import cpanel from './vector-logo/cpanel.svg'
import './Vendors.css'

function Vendors() {
    const vendorList = [
        {  
            id: 1,
            title: "Cloudflare",
            img: `${cloudflare}`
        },
        {
            id: 2,
            title: "LiteSpeed",
            img: `${litespeed}`
        },
        {
            id: 3,
            title: "Let's Encrypt",
            img: `${letsencrypt}`
        },
        {
            id: 4,
            title: "Cloud Linux",
            img: `${cloudlinux}`
        },
        {
            id: 5,
            title: "cPanel",
            img: `${cpanel}`
        }        
    ]
    return (
        <div className="vendor-div">
                <h2 className="vendor-text">Our Vendors</h2>
            <div key={vendorList.id} className="vendors">
                {vendorList.map((vendors, index) => (
                    <img key={index} className="vendor-image" alt={vendors.title} src={vendors.img}/>    
                ))}
            </div>
        </div>
    )
}

export default Vendors

这是我在堆栈溢出上找到的答案，我猜这不是这里的问题。Link to the problem

Answer 1

您必须像这样从地图内部返回创建的div

{features.map((feature, i) => {
                        
    return <div key={i} className="dedicated-feature">
                            
        <h3 className="feature-heading">{feature.title}</h3>
                            
        <p className="feature-text">{feature.text}</p>
                        
    </div>
})}

或者，您可以在映射函数中使用括号而不是{}。括号将隐式返回它们内部的JSX

{features.map((feature, i) => (
                        
    <div key={i} className="dedicated-feature">
                            
        <h3 className="feature-heading">{feature.title}</h3>
                            
        <p className="feature-text">{feature.text}</p>
                        
    </div>
))}