javascript - 即使相同的代码适用于另一个组件，部分功能组件也不会在 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

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

标签： javascriptreactjsreact-router

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