功能组件的一部分不会在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

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

我检查了一些与渲染问题相关的堆栈溢出的答案，但我遵循一切，我不确定我错过了什么。

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

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

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

这是我在堆栈溢出上找到的答案，我猜这不是问题所在。链接到问题

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>
))}